Javascript to implement seamless image scrolling special effect _ javascript skills

This article mainly introduces relevant materials for js to implement seamless and scrolling effects on images. This example is common on webpages. If you need it, refer to the following, the first focus of seamless rolling is "dynamic. To learn how to make the page element nodes work, you must understand the related knowledge about the timer in JavaScript.

There are two methods to create a timer in JS: setTimeout and setInterval. First, they receive the same parameters: the first parameter is a function for timer execution, and the second parameter is a number, which indicates how many milliseconds later the timer will execute the function. The difference is that setTimeout only executes the aggregate function after the specified time, And setInterval is used to execute the function once at the specified time interval, that is, setInterval is the cyclic version of setTimeout.

There is also a usage of the Timer: to eliminate the timer, there are also two methods: clearTimeout and clearInterval, which correspond to different types of timers respectively. In addition, they all receive only one parameter, which is a value returned by the timer (I found in chrome that this return value is a number), used to specify to eliminate that timer.

After understanding the timer knowledge, we began to analyze how to use the timer to let the elements move. In fact, this is very simple, just like the principle of a movie, so that the elements can be continuously displaced in a short period of time. If we look like this element, we just want to keep moving. You can modify the style of an element by modifying the element style in JS, for example

oUl.style.left = oUl.offsetLeft + speed + 'px';

In the above Code, speed is the displacement generated each time. It is quite interesting to use speed: we can modify the positive and negative values of speed to modify the rolling direction.

In addition, I personally think there are two points to note about the element attribute offsetLeft: the value of offsetLeft is determined by the distance between its own left position and its own set margin sum and offsetLeft, which are similar to its include layer (offsetTop ). Of course, this is all my own understanding, and it is definitely not very accurate. I will solve it next time.

The principle of moving elements is basically like this. The following describes how to implement the seamless scrolling display of images. I have used this example to scroll to the left. The principle is the same as that of the right. The Code mentioned above:

First, assume that there are only four images that need to be rolled cyclically. In order to meet the cycle requirement of image scrolling, You need to perform the following operations on the image (1:

In this way, when the first image 1 scroll out of the border, the image 1 at the end appears behind Image 4, and the effect looks the same as the loop ~

When the image is scrolled to the following:

If you continue to scroll, it will lead to blank spaces behind the image, which is not the effect of circular scrolling. In fact, this is also the key of the program. When the image is rolled to the image (2, the image should be rolled back to the figure (1) and then continued to scroll, thus forming a seamless and circular scrolling effect.

In addition, I expanded the program to write the effect of moving the mouse into the image to stop scrolling, and moving the mouse into the image to continue scrolling. This is achieved by eliminating the timer. The code is very simple and will not be introduced. I also set the image size to 160*120 for better style. You need to prepare the image yourself when running the code.

The Code is as follows:

  
   Title  Script window. onload = function () {var oDiv = document. getElementById ('p1'); var oUl = document. getElementById ('ul1'); var speed = 2; // initialization speed oUl. innerHTML + = oUl. innerHTML; // image content * 2 ----- reference figure (2) var oLi = document. getElementsByTagName ('lil'); oUl. style. width = oLi. length * 160 + 'px '; // set the ul width so that the image can be put down var oBtn1 = document. getElementById ('btn1 '); var oBtn2 = document. getElementById ('btn2'); function move () {if (oUl. offsetLeft <-(oUl. offsetWidth/2) {// scroll to the left. oUl is used to remove the border from the left. style. left = 0;} if (oUl. offsetLeft> 0) {// scroll to the right, oUl when the border is removed from the right. style. left =-(oUl. offsetWidth/2) + 'px ';} oUl. style. left = oUl. offsetLeft + speed + 'px ';} oBtn1.addEventListener ('click', function () {speed =-2 ;}, false); oBtn2.addEventListener ('click', function () {speed = 2 ;}, false); var timer = setInterval (move, 30); // global variable, save the returned timer oDiv. addEventListener ('mouseout', function () {timer = setInterval (move, 30) ;}, false); oDiv. addEventListener ('mousemove ', function () {clearInterval (timer); // move the mouse to clear the timer}, false);} script      
    
 
 
      
  
  
      
  
  
      
  
  
      
  
  
    
 
 
  

The above is the detailed code for js to implement seamless rolling effects. I hope it will be helpful for your learning.