<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ padding: 0; margin: 0;}
li{
list-style: none;
}
#swiper{ width: 600px; margin: 0 auto;overflow: hidden; }
#swiperBox{position: relative; left: 0px;}
#swiperBox li{ width: 600px; float: left;}
#swiperBox li img{ width: 100%;}
</style>
</head>
<body>
<div id="swiper">
<ul id="swiperBox">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
</ul>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var swiperUl =$("#swiperBox");
var swiperLi = $("#swiperBox li");
var imgNumber = swiperLi.length;
var wait = 2000;//轮播的时间
var speed= 500;//每次轮播的时间
var imgWidth = swiperUl.width();
swiperUl.css("width",imgWidth*(imgNumber+2));//设置ul的宽度
var timer = null;
var iNow = 1;
$("#swiperBox li").first().clone().appendTo(swiperBox);//结尾追加
$("#swiperBox li").last().clone().prependTo(swiperBox);//前面插入
swiperUl.css("left",-imgWidth*iNow);//设置默认
function animate() {
swiperUl.animate({
left : -imgWidth*iNow
},speed,function () {
if(iNow===imgNumber+1){
iNow=1;
swiperUl.css("left",-imgWidth*iNow);//重置
}
});
}
timer=setInterval(function () {
iNow++;
animate();
},wait);
</script>
</body>
</html>