jQuery气泡变换图片切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery气泡变换图片切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery气泡变换图片切换效果</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- The plugin stylehseet -->
<link rel="stylesheet" href="assets/jquery.bubbleSlideshow/jquery.bubbleSlideshow.css" />
<!--[if lt IE 9]>
<script src="assets/jquery.bubbleSlideshow/html5.js"></script>
<![endif]-->
</head>

<body>

<!-- The bubble slideshow holder -->
<ul id="slideShow">
</ul>
<!-- JavaScript includes -->
<script src="assets/jquery.bubbleSlideshow/jquery.min.js"></script>
<script src="assets/jquery.bubbleSlideshow/bgpos.js"></script>
<script src="assets/jquery.bubbleSlideshow/jquery.bubbleSlideshow.js"></script>
<script src="assets/js/script.js"></script>
<br>
</body>
</html>

JS代码(script.js):

$(function(){
	var photos = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg'];
	var slideshow = $('#slideShow').bubbleSlideshow(photos);
	$(window).load(function(){
	slideshow.autoAdvance(5000);
}
);
	// Other valid method calls:// slideshow.showNext();
	// slideshow.showPrev();
	// slideshow.stopAutoAdvance();
}
);

CSS代码(styles.css):

/*-------------------------Simple reset--------------------------*/
*{margin:0;padding:0;}
/*-------------------------General Styles--------------------------*/
html{background:url('../img/bg_tile.jpg') #383839;}
body{color:#fcfcfc;font:14px/1.3 'Segoe UI',Arial,sans-serif;background:url('../img/bg_center.jpg') center center no-repeat;min-height:650px;}
a,a:visited{text-decoration:none;outline:none;color:#aaa;}
a:hover{text-decoration:underline;}
/*-------------------------------Slideshow Customizations--------------------------------*/
#slideShow{margin:150px auto 0;border:7px solid #fff;width:635px;height:415px;box-shadow:5px 5px 0 rgba(22,22,22,0.3);}
/*-------------------Credit--------------------*/
p.credit{font-size:11px;text-align:center;padding:40px;text-shadow:1px 1px 0 #333333;}
p.credit i{display:inline-block;font-size:10px;font-style:normal;padding-top:10px;}
/*----------------------------The Footer-----------------------------*/
footer{display:block;background-color:#212121;box-shadow:0 -1px 2px #111;position:fixed;width:100%;height:70px;bottom:0;left:0;z-index:100000;}
footer h2{font-size:20px;font-weight:normal;left:50%;margin-left:-400px;padding:22px 0;position:absolute;width:400px;color:#eee;}
footer a.tzine,a.tzine:visited{background:url("../img/tzine.png") no-repeat right top;border:none;text-decoration:none;color:#FCFCFC;font-size:12px;height:70px;left:50%;line-height:31px;margin:23px 0 0 110px;position:absolute;top:0;width:290px;}

附件:下载该文件资源,减少时间成本(增值服务)