<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Carousel Diagram</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: -;cursor:Pointer;}#left{ left:0px;}#right{ right:0px;} </style></Head><Body> <Divclass= "wrap"> <Divclass= "banner"> <ulclass= "imglist"> <Li><imgsrc= "img/ban01.png"></Li> <Li><imgsrc= "img/ban02.png"></Li> <Li><imgsrc= "img/ban03.png"></Li> </ul> <imgsrc= "img/left.png"ID= "left"> <imgsrc= "img/right.png"ID= "right"> </Div> </Div> <Scripttype= "text/javascript"src= "jquery.min.js"></Script> <Scripttype= "text/javascript">/*..... This won't make the last seamless jump to the first one ...*//*var curindex = 0; var Imglen = $ (". imglist li"). length; var autochange = setinterval (function () {if (curindex*//*..... This allows you to achieve the last seamless jump to the first (the principle is to put the first clone to the last one Behind) ...*/ varTimer=SetInterval (function() { $(". Imglist"). Animate ({" left": "-520px" }, -, function(){ $(". Imglist"). Children ("Li:first"). InsertAfter ($ (". Imglist"). Children ("Li:last")); $(". Imglist"). css (" left", 0); }); }, 2500);
The following wording is equivalent to the above, but InsertAfter there is not the Same. /*var timer = setinterval (function () {$ (". imglist"). animate ({"left": " -520px" }, $, function () {$ (". imglist li:first"). insertafter ($ (". imglist li:last")); $ (". imglist"). CSS ("left", 0); }); }, 2500);*/ </Script></Body></HTML>
jquery handwritten focus Carousel-------solve The last problem of a seamless jump to the first one