Home>

This article has written a carousel to practice hands,First wrote a carousel that clicked on the carousel manually.Then I will slowly continue to write in-depth auto carousel and mouse hover images to stop moving carousel and so on.

Let ’s take a look at the effect of the final manual click rotation:

I. Principles

(1) First is the structure of the carousel.I used a large outer div to wrap two small divs, and a small div with four pictures inside.Put four number buttons in another small div

(2) The width set for the outermost large div is the width of the picture,Anything beyond the width of a large div needs to be hidden,But for the small div that holds the picture, set the width to 2000px, a little bigger for the left floating layout of the four pictures

(3) When the number button is clicked,Get the index value of the button,This way you can know how much to the left of each picture

As can be seen from the figure above,The four pictures are floating horizontally,When the number button is clicked,The picture must be driven to the width of the n pictures to display in the parent frame according to the index value of the number button.Because the pictures outside the parent frame will be hidden ~~~~~ If you do n’t understand the principle,I can only vomit blood ~~~~

Second, look at the main program

<! Doctype html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>Carousel ① (click the carousel manually)</title>
 <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
 <div>
  <!-Picture layout start->
  <ul>
  <li><a href="#"><img src="img/picture01.jpg" /></a></li>
  <li><a href="#"><img src="img/picture02.jpg" /></a></li>
  <li><a href="#"><img src="img/picture03.jpg" /></a></li>
  <li><a href="#"><img src="img/picture04.jpg" /></a></li>
  </ul>
  <!-End of picture layout->
  <!-Button layout start->
  <div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  </div>
  <!-End of button layout->
 </div>
 <script src="js/jquery-1.11.3.js"></script>
 <script src="js/layout.js"></script>
 </body>
</html>

The layout above I have explained in the principle,I am interested to see the principle ~~~~

Third, 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;/* The picture of the overflow frame needs to be hidden here * /
}
.slideshow ul {
 width:2000px;
 position:relative;/* Note here:objects cannot be stacked,But it will be offset in the normal document flow according to the attributes of left, right, top, bottom, etc.
Without this attribute,Pictures cannot be moved left or right * /
}
.slideshow ul li {
 float:left;/* Four pictures to the left,Form side-by-side horizontal layouts,Convenient left movement when clicking button * /
 width:346px;
}
.slideshow .shownav {/* Layout for number buttons with absolute positioning * /
 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;
}

I have noted the important points in the above style.I believe that the basics are easy to understand,At first I was.In the slideshow ul style, I forgot to write position:relative;It took a long time to find this error,Hope everyone can pay attention to this place ~~~~~~~

Fourth, the 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 () {//Bind a click event to each button
  $(this) .addclass ("active"). siblings (). removeclass ("active");//Add the highlighted state to this button when the button is clicked,And remove the other buttons from the highlighted state
  var index=$(this) .index ();//Get which button was clicked,Which is to find the index value of the clicked button
  ul.animate ({
  "left":-onewidth * index, //Note that the left property is used here, so the position of ul needs to be set in position:relative;to move ul left by the width of n images,n is determined according to the index value of the clicked button index
  })
 })
})

Doesn't it feel simple,It ’s just a few words to get the effect of manual click rotation.The above program needs to pay attention to the left property is left shift,So it's negative ~~~~~~~

  • Previous Detailed routing of Express
  • Next How to write a crawler elegantly in C