Jqyery Implementing a Carousel

See the major sites have a carousel effect, I can not help but also want to do a, check the information, look at the principle of the carousel, slowly try to do, the final effect barely

principle: , imagine if you set the Width property value of <ul> to wide, until you can load all of your pictures, and each one is wrapped in <li> and set to the left float.

So when we move the UL to the left and the distance is the width of the <li>, the second <li> is not moved to the <div> window, so that the picture is not a single display it?

Next we set the <div> properties Overflow:hidden, then the <div> window image is not displayed, only the picture moved to the current window, is not perfect again some, feel quick to do it!

Say a few principles, OK, directly on the code, remember to introduce jquery.

This is the div to do the layout, do when you remember to add a border, do after the deletion, so easy to test

1 <Divclass= "Slideshow">2     <Divclass= "Nav-t">3         <ul>4             <Li><ahref="#"Target= "_blank"><imgsrc= "Images/1.png"alt=""></a></Li>5             <Li><ahref="#"Target= "_blank"><imgsrc= "Images/2.png"alt=""></a></Li>6             <Li><ahref="#"Target= "_blank"><imgsrc= "Images/3.png"alt=""></a></Li>7             <Li><ahref="#"Target= "_blank"><imgsrc= "Images/4.png"alt=""></a></Li>8             <Li><ahref="#"Target= "_blank"><imgsrc= "Images/5.png"alt=""></a></Li>9         </ul>Ten         <Divclass= "Nav-b"> One             <spanclass= "Active">1</span> A             <span>2</span> -             <span>3</span> -             <span>4</span> the             <span>5</span> -         </Div> -     </Div> -   </Div> +   <Scripttype= "Text/javascript"src= "Jquery-min.js"></Script> -   <Scripttype= "Text/javascript"src= "Lunbo.js"></Script>

Next, set the style

1 <style>2 . Slideshow{3 Border:0px solid Blue;4 width:600px;5 Height:450px;6 margin:50px Auto;7 position:relative;8}9 . Nav-t{Ten Border:0px solid Red; One width:580px; A Height:430px; - margin:8px Auto; - position:relative; the Overflow:Hidden; -} - . Nav-t ul{ - Border:0px solid Green; + List-style:None; - width:3000px; + Height:430px; A margin:0; at padding:0; - position:relative; -} - . nav-t Li{ - Height:427px; - width:580px; in float: Left; -} to . Nav-b{ + position:Absolute; - Top:390px; the  Left:220px; * cursor:default; $}Panax Notoginseng . Nav-b span{ - Margin-right:5px; the Border:1px solid Red; + padding:0 6px; A Border-radius:12px; the Color:#fff; + background:Rgba (132,125,119,0.5); - cursor:Pointer; $} $ . Nav-b span.active{ - background:Rgba (0,0,0,0.8); -} the </style>

Use JS to implement click-to-carousel pictures, auto-carousel pictures, mouse move up stop carousel

1$(function(){2     3$(function(){4     varslide=$ (". Slideshow"),5Navt=slide.find (". Nav-t"),6Ul=navt.find ("ul"),7Navbs=slide.find (". Nav-b span"),8Onwidth=ul.find ("Li"). EQ (0). Width (),//get the li width under UL9Timer=NULL,TenInow=0; OneNavt.hover (function(){ AClearinterval (timer);//move the mouse to clear out the automatic carousel function, that is, timed carousel - },autoplay);  -Navbs.on ("click",function(){//Click the Carousel event the         varme=$ ( This); -Inow=me.index ();//The variables used here are the same as in the auto-carousel function, so that after random clicks, the auto-carousel will continue to turn back and forth as we clicked, which is called dynamic real-time -Ul.animate ({left:-inow*onwidth},0.01);//ul moves left so that the next Li is displayed to the current window of the Div -Navbs.removeclass ("active");//clears the style of the previous click button +Me.addclass ("active");//Add the first button style for the button that is currently clicked -     }); + AutoPlay ();  A     functionAutoPlay () {//Automatic Carousel function atTimer=setinterval (function(){//Open Timer -inow++; -         if(inow==navbs.length) {//decide if it's the last one, and if so, go back to the first one. -Inow=0 -             } -Navbs.eq (Inow). Trigger ("click");//automatically call the Click event with a span index based on timed time, trigger the automatic call function for jquery in},3000); -     } to  + }); -  the  *  $});

Take a look? Good

How about, or do you do one?

Jqyery Implementing a Carousel