JS Seamless Scrolling Effect Realization method Analysis _javascript Skill

Source: Internet
Author: User
Tags numeric value setinterval

This paper illustrates the implementation of JS seamless scrolling effect. Share to everyone for your reference, specific as follows:


1. Default slow to left scroll

2. On the left ARROW or left to scroll, put on the right arrow scroll right

3. Put on the picture to stop scrolling, move out and continue scrolling


1. Calculate the picture list ul width

2. Turn the timer on to the left margin, causing the effect of moving to the left

3. A copy of the picture list, when moving to the left, when the left margin is greater than the width of one, pull its left margin back to 0. When you move to the right, when the left margin is greater than 0 o'clock, pull its left margin to half the width of the entire two picture list (that is, one width). (Pull the moment quickly, the user does not perceive, resulting in a seamless scrolling illusion)

The 4.offsetLeft value of the positive and negative decide which way to move

5. Put on the picture to stop this timer, remove and open again

Window.onload=function () {var odiv=document.getelementbyid (' div ');
 var oul=odiv.getelementsbytagname (' ul ') [0];
 var oli=oul.getelementsbytagname (' Oul ');
 var btn=document.getelementsbytagname (' btn ');
 var ispeed=-1;
 var timer=null; oul.innerhtml+=oul.innerhtml; The picture list copies a copy of oul.style.width=oli[0].offsetwidth*oli.length+ ' px '; Do not calculate the width of the UL, the movement of the following will appear before loading pictures, there is a sense of not fluent, cut the picture too many will branch, by the outside of the div decision width timer=setinterval (function () {oul.style.left=  oul.offsetleft+ispeed+ ' px '; Offsetleft output is the number without units, the right also with Oul.style.left output is a string, not a numeric value, and it gets the row style, useless if (OUL.OFFSETLEFT<-OUL.OFFSETWIDTH/2) {/ /When judging, you can also use. style.left or. style.width?
  (uncertain) oul.style.left=0;
  else if (oul.offsetleft>0) {OUL.STYLE.LEFT=-OUL.OFFSETWIDTH/2;
 }), 30};
 Btn[0].onmouseover=function () {ispeed=-1;
 Btn[1].onmouseover=function () {ispeed=1;
 Oul.onmouseover=function () {clearinterval (timer);
   Oul.onmouseout=function () {Timer=setinterval (function () {oul.style.left=oul.offsetleft+ispeed+ ' px '); if (oul.ofFSETLEFT<-OUL.OFFSETWIDTH/2) {oul.style.left=0;
   else if (oul.offsetleft>0) {OUL.STYLE.LEFT=-OUL.OFFSETWIDTH/2; }), 30}; If the speed of the larger, and the time of the timer is also larger can achieve the same effect? The answer is no.
will turn into a card and a card;


Note: the width of such a child is not margin, so the spacing between the pictures can be written in Li's width greater than the IMG's width, Li's width-img width, is the margin of both sides and

More readers interested in JavaScript-related content can view the site topics: "JavaScript switching effects and tips summary", "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and tips summary", " JavaScript error and debugging skills Summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary and JavaScript mathematical calculation usage Summary

I hope this article will help you with JavaScript programming.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.