Home > Developer > JavaScript
Seamless and continuous image scrolling with jQuery animation Effects
This article introduces the code for seamless continuous scrolling of Images Using jQuery animation effects. The details are as follows:
As follows:
I. HTML code
<body> <div id="container"> <ul id="content"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </body>
1. div whose id is container is the package of the outermost layer, which is used to control the specific position displayed in the rolling area.
2. ul with the id of content is used to wrap the pictures that need to be rolled.
3. The li element is used to wrap a specific image.
Ii. CSS code
*{margin: 0; padding: 0;} img{ border:0; } #container{ width:800px; height: 130px; <span style="white-space:pre"> </span>margin:100px auto; border:3px solid blue; overflow: hidden; position: relative; } #container ul{ list-style: none; width:10000px; position: absolute; } #container ul li{ float:left; margin-right: 20px; }
Here, we will explain why ul's width is set to pixel PX. Because the implementation principle of seamless continuous scrolling is to clone a copy of the existing displayed image and splice it behind the displayed image, the total width of the displayed image is unknown, to ensure security, we recommend that you set the width of ul to a greater value.
Iii. Analysis on the principle of seamless Continuous Rolling
Iv. JQuery implementation code
<Script type = "text/javascript">/* window. onload is later than $ (function () {}), so that the width calculation can be accurately calculated in Chrome */window. onload = function () {/* calculate the width of a segment */var segmentWidth = 0; $ ("# container # content li "). each (function () {segmentWidth + = $ (this ). outerWidth (true) ;}); $ ("# container # content li "). clone (). appendTo ($ ("# container # content"); run (6000); function run (interval) {$ ("# container # content "). animate ({"left":-segmentWidth}, interval, "linear", function () {$ ("# container # content" ..css ("left", 0 ); run (6000) ;};}$ ("# container "). mouseenter (function () {$ ("# container # content "). stop ();}). mouseleave (function () {var passedCourse =-parseInt ($ ("# container # content" ..css ("left ")); var time = 6000 * (1-passedCourse/segmentWidth); run (time) ;};</script>
1. traverse all li elements through each and calculate the sum of their widths.
2. Copy an image to the end of the existing image, as shown in figure 1 of the Principle Analysis image.
3. set the existing image to scroll through the page in 6 seconds. After scrolling, set the left value of content to bring it back to the initial state. The principle analysis chart is shown in figure 2. Call the run method recursively to complete infinite scrolling.
4. When the mouse passes through the scroll area, the animation stops immediately. When the mouse leaves, the Animation continues to run.
The code for executing the animation, such as analysis:
The above is jQuery's code for seamless and continuous image scrolling. I hope it will help you learn more.
Articles you may be interested in: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
