今天在网上找图片轮播插件，发现大多功能丰富又跨浏览器。自己也利用jQuery实现了一个。
1.实现的功能：
- 利用jQuery，也是跨平台了嘛
- div自适应图片，图片不失真
- 循环播放
- 动态加载图片
- 只是没有实现动态交互。
2.代码实现
2.1 HTML部分
<pre name="code" class="html"><pre name="code" class="html"><div class="banner"> <span class="pic-close" title="关闭"> <img src="images/pic-close.png"/> </span> </div>
这里，banner是图片展示的容器，<span><img/></span>用于实现右上角的关闭按钮
2.2 CSS控制
为了效果更好看，需要对上述的HTML元素进行css样式设定。
banner：
.banner {
position: absolute;
border:solid 5px #fff;
top:20%;
left:20%;
padding:0;
background-color:black;
height:auto !important;
}
.pic-close与.pic-close img,我们需要使用绝对定位。并设置圆角，使它看起来像是圆形
.pic-close{
position:absolute;
width:20px;
height:20px;
top:-15px;
right:-15px;
border:solid 2px #fff;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
background-color:#fff;
cursor:pointer;
}
.pic-close img{
width:100%;
height:100%;
}
.banner li{
list-style: none;
}
2.3 jQuery部分
动态添加图片。
for(var i=0; i<photo_count;i++){
var setphoto="<li style='display:none'><img src='./photos/"+photo_path+"/"+i+".jpg'></li>";//动态添加图片，例如1.jpg,2.jpg,3.jpg等等
$(setphoto)
.appendTo(".banner");
}
var $li=$(".banner li:first").show();//选择第一张图片进行展示
var time=setInterval(function(){
$li.hide(); //该图片隐藏
$li=$li.next("li"); //移动到下一张图片
if($li.length==0) //若是到最后一张，则定位到第一张
$li=$(".banner li:first").show();
else
$li.show(); //展示
},2000); //每隔2秒换一张
$(".pic-close").click(function(){
clearInterval(time); //删除定时器
$(".banner li").remove();//清空播放列表
$(".banner").hide();//隐藏播放面板
});
3.效果图
贴几张图，看看效果
