JQuery implements big image carousel and jquery big image
Css style:
*{
Margin: 0;
Padding: 0;
}
Ul {
List-style: none;
}
. SlideShow {
Width: 620px;
Height: 700px;/* is actually the image height */
Border: 1px # eeeeee solid;
Margin: 100px auto;
Position: relative;
Overflow: hidden;/* Hide the image part of the overflow framework */
}
. SlideShow ul {
Width: 2500px;
Position: relative;/* Note relative: the object cannot be stacked, but it will be offset in the normal Document Stream Based on the left, right, top, bottom and other attributes. If this attribute is not available, images cannot be moved left or right */
}
. SlideShow ul li {
Float: left;/* float the left of the four images to form a side-by-side horizontal layout to move left when you click the button */
Width: 620px;
}
. SlideShow. showNav {/* layout with the absolute position on the numeric button */
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;
}
Js Code specifications:
<Script src = ".../jQuery/js/jquery-2.1.4.js"> </script> <script type = "text/javascript">
$ (Document). ready (function (){
Var slideShow = $ (". slideShow"), // obtain the name of the outermost Frame
Ul = slideShow. find ("ul "),
ShowNumber = slideShow. find (". showNav span"), // obtain the button
OneWidth = slideShow. find ("ul li"). eq (0). width (); // obtain the width of each image
Var timer = null; // the return value of the timer, which is mainly used to disable the timer.
Var iNow = 0; // iNow indicates the index value of the image being displayed. When a user opens a webpage, the first image is displayed, that is, the index value is 0.
ShowNumber. on ("click", function () {// bind a click event for each button
$ (This ). addClass ("active "). siblings (). removeClass ("active"); // click the button to add the highlighted status for this button and remove the highlighted status of other buttons.
Var index = $ (this). index (); // obtain the index value of the clicked button.
INow = index;
Ul. animate ({"left":-oneWidth * iNow, // note that the left attribute is used here, so set position: relative in the ul style; let ul move the width of N pictures to the left, and N is determined based on the index value iNOWx of the clicked button.
})
});
Function autoplay (){
Timer = setInterval (function () {// enable the timer
INow ++; // Add 1 to the order of the image index values, so that the image can be Carousel in sequence.
If (iNow> showNumber. length-1) {// when the last graph is reached, set iNow to the index value of the first graph. The carousel effect jumps to the first graph and starts again.
INow = 0 ;}
ShowNumber. eq (iNow). trigger ("click"); // simulate the click of the number button
}, 2000); // 2000 indicates the carousel time.
}
Autoplay ();
SlideShow. hover (function () {clearInterval (timer) ;}, autoplay); note that the usage of setInterval is critical.
})
</Script>
Subject code:
<Body>
<Div class = "slideShow">
<! -- Image Layout starts -->
<Ul>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
</Ul>
<! -- Picture layout ends -->
<! -- Button layout starts -->
<Div class = "showNav">
<Span class = "active"> 1 </span>
<Span> 2 </span>
<Span> 3 </span>
<Span> 4 </span>
</Div>
<! -- Button layout ends -->
</Div>
</Body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
