<!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>