jquery Picture Carousel Scrolling Effect (page effect-daily one more)

Today, bring a picture of the carousel scrolling effect!

Let's take a look at the effect show: http://webfront.verynet.cc/pc/index.html

The principle is simple, set a timer so that the picture list is scrolled once every time. The loop effect is that at each scrolling time, the first picture is placed behind the last one, see the code for details.

The HTML structure code is as follows:

1     <Divclass= "Content">2         <Divclass= "box">3 / * Scroll the box * /4             <ulID= "Scroll_box">5                 <Li><imgsrc=".. /images/1.jpg "alt=""/></Li>6                 <Li><imgsrc=".. /images/2.jpg "alt=""/></Li>7                 <Li><imgsrc=".. /images/3.jpg "alt=""/></Li>8                 <Li><imgsrc=".. /images/4.jpg "alt=""/></Li>9                 <Li><imgsrc=".. /images/5.jpg "alt=""/></Li>Ten                 <Li><imgsrc=".. /images/6.jpg "alt=""/></Li> One                 <Li><imgsrc=".. /images/7.jpg "alt=""/></Li> A                 <Li><imgsrc=".. /images/8.jpg "alt=""/></Li> -                 <Li><imgsrc=".. /images/9.jpg "alt=""/></Li> -                 <Li><imgsrc=".. /images/10.jpg "alt=""/></Li> the             </ul> -         </Div> -     </Div>

Style code:

1 <style type= "Text/css" >2         *{margin:0px;padding:0px;}3 . Content{width:800px;margin:30px Auto;Height:200px;}4 . Box{width:800px;Overflow:Hidden;Height:200px;}5 #scroll_box{List-style:None;}6 #scroll_box Li{width:200px;float: Left;Height:200px;}7 #scroll_box li img{width:200px;Height:200px;}8 </style>

JS Script code:

1<script type= "Text/javascript" >2         varLength = $ ("#scroll_box Li"). length;3         varLiwidth = $ ("#scroll_box li"). Outerwidth (true);4         varBoxwidth = $ (". Box"). Outerwidth (true);5         varShowlength = Math.ceil (boxwidth/liwidth);//display the number of pictures6         varSpeed = 1000;//scrolling Speed7         varTime = 3000;//scrolling Interval8         varScrollindex = 1;//number of pictures per scroll9$ ("#scroll_box"). CSS ("width", length * liwidth);//set the width of the scroll boxTen         functionScroll () { One$ ("#scroll_box"). Stop (). Animate ({"Margin-left": "-" +scrollindex*liwidth+ "px"},speed,function(){ A$ ("#scroll_box"). CSS ("Margin-left", 0); -                  for(varI =0;i < scrollindex;i++){ -                     //put the first picture behind the last picture the$ ("#scroll_box"). Find ("Li"). Last (). After ($ ("#scroll_box"). Find ("Li"). First ()); -                 } -             }); -         } + setinterval (scroll,time); -</script>

It is important to note that in the script we need a for loop to control the transposition of the picture. The number of cycles here depends on the number of times we roll the picture. The reader can try it out for himself.

Enjoy the code and enjoy life. Page effect, one more day.

jquery Picture Carousel Scrolling Effect (page effect-one more day)