Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> jQuery-based control of left-side scrolling effect _ Automatic Rolling version </title>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<Style>
Body {font-size: 0.8em; letter-spacing: 1px; font-family: ""; line-height: 1.8em}
Div, ul, li, ol, img {margin: 0; padding: 0}
H1 {font-size: 1em; font-weight: normal ;}
H1 a {background: # CFF; padding: 2px 3px; text-decoration: none ;}
H1 a: hover {background: # eee; text-decoration: underline}
H2, h3 {font-size: 1em; font-weight: normal; color: # a40000; margin: 1em auto; position: relative}
H3 {color: #888; font-weight: bold}
Ul, li, ol {list-style: none}
. Ibox {width: 850px; height: 210px; background: # ddd; margin: 1em auto; border: 1em solid # ddd; position: relative; overflow: hidden}
. Ibox. showbox {position: absolute; left: 0; width: 2550px; height: 170px; background: # fff}
. Ibox. showbox ul li {float: left; margin: 7px}
. Ibox. showbox ul li img {width: 150px; height: 150px; border: 3px solid # a40000}
. Ibox span {position: absolute; padding: 2px 5px; background: # fff; cursor: pointer ;}
. Ibox span. pre {left: 10px; bottom: 0}
. Ibox span. next {right: 10px; bottom: 0}
. Ibox span. num {right: 45%; bottom: 0; background: # ddd; line-height: 18px ;}
. Ibox span. num li {display: inline; margin: 0 5px; padding: 1px 5px; line-height: 18px}
. Ibox span. num. numcur {background: # a40000; color: # fff}
</Style>
<Script>
$ (Function (){
// @ Mr. Think *** variable
Var $ cur = 1; // initialize the displayed layout
Var $ I = 5; // Number of displays per version
Var $ len = $ ('. showbox> ul> li'). length; // calculate the total length of the list (Quantity)
Var $ pages = Math. ceil ($ len/$ I); // calculates the number of display pages.
Var $ w = $ ('. ibox'). width (); // obtain the peripheral width of the display area.
Var $ showbox = $ ('. showbox ');
Var $ num = $ ('span. num li ')
Var $ pre = $ ('span. pre ')
Var $ next = $ ('span. next ');
Var $ autoFun;
// @ Mr. Think *** call auto-scroll
AutoSlide ();
// @ Mr. Think *** scroll forward
$ Pre. click (function (){
If (! $ Showbox. is (': animated') {// determines whether the display area is animated.
If ($ cur = 1) {// scroll forward to the last page when the first page is displayed.
$ Showbox. animate ({
Left: '-=' + $ w * ($ pages-1)
}, 500); // change the left value, switch the display layout, 500 (MS) for the scroll time, the same below
$ Cur = $ pages; // initialize the last Layout
}
Else {
$ Showbox. animate ({
Left: '+ =' + $ w
}, 500); // change the left value and switch the display Layout
$ Cur --; // layout reduction
}
$ Num. eq ($ cur-1 ). addClass ('numcur '). siblings (). removeClass ('numcur'); // Add a highlighted style to the corresponding layout number and remove the highlighted style of the same level element.
}
});
// @ Mr. Think *** scroll backward
$ Next. click (function (){
If (! $ Showbox. is (': animated') {// determines whether the display area is animated.
If ($ cur = $ pages) {// scroll back to the first layout in the last Layout
$ Showbox. animate ({
Left: 0
}, 500); // change the left value, switch the display layout, 500 (MS) for the scroll time, the same below
$ Cur = 1; // initialize the layout as the first Layout
}
Else {
$ Showbox. animate ({
Left: '-=' + $ w
}, 500); // change the left value and switch the display Layout
$ Cur ++; // the total number of pages
}
$ Num. eq ($ cur-1 ). addClass ('numcur '). siblings (). removeClass ('numcur'); // Add a highlighted style to the corresponding layout number and remove the highlighted style of the same level element.
}
});
// @ Mr. Think *** number Click Event
$ Num. click (function (){
If (! $ Showbox. is (': animated') {// determines whether the display area is animated.
Var $ index = $ num. index (this); // index the position value of the current click in the list
$ Showbox. animate ({
Left: '-' + ($ w * $ index)
}, 500); // change the left value, switch the display layout, 500 (MS) is the scroll time
$ Cur = $ index + 1; // initialize the layout value. When this sentence is rolled to the third edition, click the backward button to display the blank version. the index () value starts from 0, so 1 is added.
$ (This). addClass ('numcur'). siblings (). removeClass ('numcur'); // Add a highlighted style to the current click and remove the highlighted style of the same level element
}
});
// @ Mr. Think *** stop rolling
ClearFun ($ showbox );
ClearFun ($ pre );
ClearFun ($ next );
ClearFun ($ num );
// @ Mr. Think *** stop auto scroll when the event is inserted
Function clearFun (elem ){
Elem. hover (function (){
ClearAuto ();
}, Function (){
AutoSlide ();
});
}
// @ Mr. Think *** auto scroll
Function autoSlide (){
$ Next. trigger ('click ');
$ AutoFun = setTimeout (autoSlide, 4000); // setInterval cannot be used here, And setInterval is used to repeatedly execute the input function, which causes the failure to stop the second input.
}
// @ Mr. Think *** clear Auto scroll
Function clearAuto (){
ClearTimeout ($ autoFun );
}
});
</Script>
</Head>
<Body>
<Div class = "ibox">
<Div class = "showbox">
<Ul>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Div>
<Span class = "pre"> «scroll left </span>
<Span class = "next"> scroll to the right </span>
</Div>
</Body>
</Html>
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
