<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{padding: 0;margin: 0;list-style-type: none;}
.wrap{width: 520px;height: 280px;margin: 50px auto;}
.banner{width: 520px;height: 280px;overflow: hidden;position: relative;}
.imgList{width: 1560px;height: 280px;overflow: hidden;position: absolute;left: 0;}
.imgList li{float: left;width: 520px;height: 280px;}
#left,#right{position: absolute;top: 120px;z-index: 50;cursor: pointer;}
#left{left: 0px;}
#right{right: 0px;}
</style>
</head>
<body>
<div class="wrap">
<div class="banner">
<ul class="imgList">
<li><img src="img/ban01.png"></li>
<li><img src="img/ban02.png"></li>
<li><img src="img/ban03.png"></li>
</ul>
<img src="img/left.png" id="left">
<img src="img/right.png" id="right">
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
/*.....这样写无法实现最后一张无缝跳转第一张......*/
/* var curIndex = 0;
var imgLen = $(".imgList li").length;
var autoChange = setInterval(function(){
if(curIndex<imgLen-1)
{
curIndex++;}
else{
curIndex = 0;}
changeTo(curIndex);
},2500);
function changeTo(index){
var goLeft = index * 520;
$(".imgList").animate({left:"-" + goLeft + "px"},500);
}*/
/*.....这样写可以实现最后一张无缝跳转第一张（原理就是把第一张克隆到最后一张后面）......*/
var timer = setInterval(function() {
$(".imgList").animate({
"left": "-520px"
}, 500, function(){
$(".imgList").children("li:first").insertAfter($(".imgList").children("li:last"));
$(".imgList").css("left", 0);
});
}, 2500);
下面这种写法等同上面，只是insertAfter那里写法不一样。
/* var timer = setInterval(function() {
$(".imgList").animate({
"left": "-520px"
}, 500, function(){
$(".imgList li:first").insertAfter($(".imgList li:last"));
$(".imgList").css("left", 0);
});
}, 2500);*/
</script>
</body>
</html>
