jquery manual Click to achieve picture Carousel effect _jquery

This article has written a carousel practicing, first wrote a manual click on the Carousel, and then I will slowly continue to write the automatic Carousel diagram and mouse hover picture stop moving the carousel map.
Let's look at the final manual click Carousel Effect:

First, the principle explanation

(1) First is the structure of the carousel map, I used a most outside the big div wrapped two small div, a small div inside put four pictures, another small div inside put four number button

(2) to the outermost large div set width of the picture width, beyond the width of large div need to hide, but for the picture of the small div set width of 2000px, a little more convenient four map left floating layout

(3) When the number button clicked, get the index value of the button, so you can know how much each picture left to move the width

As can be seen from the above figure, four pictures are floating up and down the horizontal layout, when the number button is clicked, the picture is to follow the index value of the number button to the width of the n picture to reach the parent frame inside the display, because the father frame outside the picture will be hidden ~~~~~ if you still do not understand the principle, I can only vomit blood ~
second, the following to see the main program

<! DOCTYPE html>  

The above layout I already explained in the principle, the interest oneself looks the principle ~ ~ ~ ~
three, CSS style

*{
 margin:0;
 padding:0;
}
ul{
 list-style:none
}
. slideshow{
 width:346px;
 height:210px;  /* is actually the height of the picture * *
 border:1px #eeeeee solid;
 margin:100px Auto;
 position:relative;
 Overflow:hidden; /* Here you need to hide the picture part of the overflow frame
/}. Slideshow ul{
 width:2000px;
 position:relative;  /* Here to note relative: objects can not cascade, but will be based on Left,right,top,bottom and other attributes in the normal document flow offset position, if there is no this property, the picture will not move around/
}
. Slideshow ul Li {
 float:left;  /* Let four pictures left floating, form side-by horizontal layout, easy to click the button when the left mobile * *
 width:346px;
Slideshow. shownav{  /* with absolute positioning to the number button layout * * *
 position:absolute;
 right:10px;
 bottom:5px;
 Text-align:center;
 font-size:12px; 
 line-height:20px
}
. Slideshow. Shownav span{
 cursor:pointer;
 Display:block;
 Float:left;
 width:20px;
 height:20px;
 Background: #ff5a28;
 margin-left:2px;
 Color: #fff;
Slideshow. Shownav. active{
 background: #b63e1a;
}

The above style I have already remark out very important place, believed to have the foundation very easy to understand, at the beginning I was in. Slideshow ul style inside forgot to write position:relative; The following jquery program picture has been unable to move, it took a long time to find this error, I hope you can pay attention to this place ~~~~~~~
Four, jquery program

$ (document). Ready (function () {
 var slideshow=$ (". Slideshow"),  //Get the name of the outermost frame
  ul=slideshow.find ("ul"),  
  shownumber=slideshow.find (". Shownav span"),//Get button
  onewidth=slideshow.find ("ul li"). EQ (0). width ();// Get the width of each picture
  
  Shownumber.on ("click", Function () {   /) to bind each button a click event  
   $ (this). AddClass ("active"). Siblings (). Removeclass ("active"); When the button is clicked, add a highlight for the button and highlight the other buttons to remove the
   var index=$ (this). index ();//Get the button clicked, that is, find the indexed value of the clicked button
   ul.animate ({
    "Left":-onewidth*index,//note here to use the Left property, so the UL style inside need to set the position:relative; let the UL move n the width of the picture size, n according to the index value of the button being clicked determines
   })
  })
})

is not feel very simple, but also a few words on the manual click on the Carousel effect, the above program needs to note that the left property is moved to a negative ~~~~~~~

The next article for everyone to share the automatic carousel effect, I hope we do not miss.