jquery Simple Seamless Carousel diagram implementation

The basic layout of this simple carousel diagram is:

A div contains a list of pictures, and a control button. Its width is equal to the width of the picture, and the overflow is hidden.

The picture should be left floating.

jquery principle:

Open a timer to perform a picture list at intervals move the width of a picture to the left, and set a callback function when moving.

The picture that moves to the left is also the first picture of the list of pictures, added to the end of the list of pictures ul.

This realizes the effect that the picture automatically plays.

How to drive the small button of the picture control to lighten?

Because each time the picture carousel, will change the picture to be worth the index, then adds a variable i to the function, each time executes the timer will i++;

Var

The index of the picture is synchronized with the image's index. 4 is the number of buttons. Picture movement add a class to the corresponding Spanindex.

button to control the Carousel diagram, I will not tell.

Example:

 <Divclass= "Side-img">              <Div>                                    <!-----------of 4 buttons---------------------- -                  <spanclass= "On"></span>                  <span></span>                  <span></span>                  <span></span>              </Div>              <ul>                  <Li><ahref=""><imgsrc= "Images/side-img1.png"/> </a> </Li>                  <Li><ahref=""><imgsrc= "Images/side-img2.png"/></a> </Li>                  <Li><ahref=""><imgsrc= "Images/side-img3.png"/> </a> </Li>                  <Li><ahref=""><imgsrc= "Images/side-img4.png"/></a> </Li>              </ul>          </Div>

CSS code:

. Side-img{Height:324px;width:693px;position:relative;Overflow:Hidden;}. side-img ul{width:2772px;position:Absolute; Left:0;}. side-img Li{float: Left;}. side-img li img{Height:324px;}. side-img Div{position:Absolute; Left:316px;Top:304px;Z-index:2;}. side-img Div span{float: Left;Margin-right:5px;width:8px;Height:8px;Background-color:#ffffff;Border:1px solid #d2cfd0;Border-radius:50%;}#main. Center side-img Div Span.on, #con1. Con1-left. side-img Div Span.on{Background-color:Red;}

Jq

  /************ picture move function library ***********/    varTimer=NULL; varI=0; functionPlay (obj,ispeed) {++i; varSpanindex=i%4; varSpan= $ ("#main. Center. Side-img Div Span") obj.animate ({left:ispeed},1000,function(){               $(". Side-img ul>li"). EQ (0). AppendTo ($ ( This)); Span.eq (Spanindex). addclass (' on '). Siblings (). Removeclass ("on"); })   }    /************ automatic rolling ********** of the carousel diagram*/Timer=setinterval (function(){      varObj= $ ("#main. Center. Side-img UL")        varIspeed= $ (". Side-img ul li"). EQ (0). Width; Play (obj,-ispeed); },3000); /************ Control button controls picture movement ***********/    $("#main. Center. Side-img Div Span"). Hover (function(){        varindex=$ ( This). index (); $( This). AddClass ("on"). Siblings (). Removeclass ("on");       Clearinterval (timer); variwidth=index*-693; $(". Side-img ul"). Animate ({left:iwidth},500); },    function() {Timer=setinterval (function(){            varIspeed= $ (". Side-img ul li"). EQ (0). Width;        Play (Ispeed); },3000); })

I first write a blog, there may be flaws in the place, I hope you pointing.

jquery Simple Seamless Carousel diagram implementation