JQuery image carousel scroll effect (webpage effect-daily), jquery --
Today, we are bringing the carousel scroll effect of an image!
First look at the effect of display: http://webfront.verynet.cc/pc/index.html
The principle is very simple. set a timer to make the image list scroll every other time. The loop effect is to put the first image behind the last one when each scroll. For details, see the code.
The HTML Structure Code is as follows:
1 <div class = "content"> 2 <div class = "box"> 3/* scroll box */4 <ul id = "scroll_box"> 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 </ul> 16 </div> 17 </div>
Style code:
1 <style type="text/css">2 *{margin:0px;padding:0px;}3 .content{width:800px;margin:30px auto;height:200px;}4 .box{width:800px;overflow:hidden;height:200px;}5 #scroll_box{list-style:none;}6 #scroll_box li{width:200px;float:left;height:200px;}7 #scroll_box li img{width:200px;height:200px;}8 </style>
JS script code:
1 <script type = "text/javascript"> 2 var length = $ ("# scroll_box li "). length; 3 var liWidth = $ ("# scroll_box li "). outerWidth (true); 4 var boxWidth = $ (". box "). outerWidth (true); 5 var showLength = Math. ceil (boxWidth/liWidth); // Number of displayed images 6 var speed = 1000; // rolling speed 7 var time = 3000; // rolling interval 8 var scrollIndex = 1; // The number of images to be rolled each time is 9 $ ("# scroll_box" ).css ("width", length * liWidth); // set the width of the scroll box to 10 function scroll () {11 $ ("# scroll_box "). stop (). animate ({"margin-left": "-" + scrollIndex * liWidth + "px"}, speed, function () {12 $ ("# scroll_box" ).css ("margin-left", 0); 13 for (var I = 0; I <scrollIndex; I ++) {14 // put the first image behind the last image for 15 $ ("# scroll_box "). find ("li "). last (). after ($ ("# scroll_box "). find ("li "). first (); 16} 17}); 18} 19 setInterval (scroll, time); 20 </script>
Note that in the script, we need a for loop to control the placement of images. The number of cycles here depends on the number of scrolling images each time. You can try it yourself.
Enjoy code and life. Webpage effect.
Initially, only the first img display is not none, and the rest are hidden.
Two Variables
Var total = $ (". popup img"). size ();
Var cur_no = 0;
When you click the next button:
If (cur_no = total-1)
Return;
Else {
$ (". Popup img"). eq (cur_no). hide ();
Cur_no + = 1;
$ (". Popup img"). eq (cur_no). show ();
}
When you click the previous button:
If (cur_no = 0)
Return;
Else {
$ (". Popup img"). eq (cur_no). hide ();
Cur_no-= 1;
$ (". Popup img"). eq (cur_no). show ();
}
A full version uses jQuery for image carousel! Thank you!
It is sometimes difficult to implement seamless scrolling between the left and right sides of an image. It can make the image scroll to the left and then scroll backwards. This can also be said to be a seamless rolling, I downloaded an example of clicking the button to scroll left and right on the Internet. After modification, I can scroll left and right freely, move the mouse over and stop scrolling, enlarge the image, slide down and scroll down, you can also click the button to control the left and right sides. Check the Code:
First look at jsp:
<Body>
<Div class = "sliderbox">
<Div id = "btn-left" class = "arrow-btn dasabled" onclick = "left2 ()"> </div>
<Div class = "slider" id = "slider">
<Ul>
<Li> <a href = "" target = "_ blank"> </a> </li>
<Li> <a href = "" target = "_ blank"> </a> </li>
<Li> <a href = "" target = "_ blank"> </a> </li>
<Li> <a href = "" target = "_ blank"> </a> </li>
<Li> <a href = "" target = "_ blank"> </a> </li>
<Li> <a href = "" target = "_ blank"> </a> </li>
<Li> <a href = "" target = "...... remaining full text>
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
