Home > Developer > JavaScript
Click the left and right buttons to scroll the image horizontally. jquery will scroll four times at a time. After the image is finished, it will automatically return to the first layout:
As follows::
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html lange = "en">
<Head>
<Title> click the left and right buttons to scroll horizontally. </title>
<Meta charset = UTF-8 "/>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Body {font-size: 12px ;}
. Box {height: 66px; float: left; width: pixel; overflow: hidden; position: relative ;}
. Box li {display: block; float: left; margin-left: 5px; margin-right: 5px; width: 100px; height: 70px; background: # BBB; font-size: 50px; color: # ccc; line-height: 66px; text-decoration: none; text-align: center; cursor: pointer ;}
. Box li: hover {color: #999 ;}
. Box li. active {background-position:-174px 0; color: #555; cursor: default ;}
A. prev,. next {background: url (http://www.shengyijie.net/images/left_02.png) no-repeat 0 0; display: block; width: 23px; height: 43px; float: left; margin: 15px 0 0 0; cursor: pointer ;}
A. next {background-image: url (http://www.shengyijie.net/images/right_02.png )}
. Scroll_list {width: Hangzhou em; position: absolute ;}
</Style>
<! -- Introduce jQuery -->
<Script src = "http://jt.875.cn/js/jquery.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
Var page = 1;
Var I = 4; // four images for each edition
// Scroll to the right
$ (". Next"). click (function () {// click Event
Var v_wrap = $ (this). parents (". scroll"); // obtain the parent element based on the currently clicked element.
Var v_show = v_wrap.find (". scroll_list"); // locate the video display area
Var v_cont = v_wrap.find (". box"); // locate the peripheral area of the video display area
Var v_width = v_cont.width ();
Var len = v_show.find ("li"). length; // number of my video images
Var page_count = Math. ceil (len/I); // if it is not an integer, the smallest integer is obtained in the greater direction.
If (! V_show.is (": animated ")){
If (page = page_count ){
V_show.animate ({left: '0px '}, "slow ");
Page = 1;
} Else {
V_show.animate ({left: '-=' + v_width}, "slow ");
Page ++;
}
}
});
// Scroll left
$ (". Prev"). click (function () {// click Event
Var v_wrap = $ (this). parents (". scroll"); // obtain the parent element based on the currently clicked element.
Var v_show = v_wrap.find (". scroll_list"); // locate the video display area
Var v_cont = v_wrap.find (". box"); // locate the peripheral area of the video display area
Var v_width = v_cont.width ();
Var len = v_show.find ("li"). length; // number of my video images
Var page_count = Math. ceil (len/I); // if it is not an integer, the smallest integer is obtained in the greater direction.
If (! V_show.is (": animated ")){
If (page = 1 ){
V_show.animate ({left: '-=' + v_width * (page_count-1)}, "slow ");
Page = page_count;
} Else {
V_show.animate ({left: '+ =' + v_width}, "slow ");
Page --;
}
}
});
});
</Script>
</Head>
<Body>
<! -- Example -->
<Div class = "scroll" style = "margin: 0 auto; width: 550px;">
<! -- "Prev page" link -->
<A class = "prev" href = "#"> </a>
<Div class = "box">
<Div class = "scroll_list">
<Ul>
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
<Li> 5 </li>
<Li> 6 </li>
<Li> 7 </li>
<Li> 8 </li>
<Li> 9 </li>
<Li> 10 </li>
<Li> 11 </li>
<Li> 12 </li>
<Li> 13 </li>
<Li> 14 </li>
<Li> 15 </li>
<Li> 16 </li>
</Ul>
</Div>
</Div>
<! -- "Next page" link -->
<A class = "next" href = "#"> </a>
</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
