Javascript-javascript tutorial

This article describes how to implement seamless rolling special effects in Javascript, and how to perform expansion exercises based on learned knowledge, if you are interested, you can refer to the examples in this article to introduce the functions required to implement seamless rolling effects in js and key js Code. The details are as follows:

Run:

Combine the following knowledge to make a simulated comprehensive extension exercise ~~ The functions are as follows:

• 1. After opening html, the image will be automatically displayed.
• 2. Click the left and right directions to change the direction of the image Movement (change the left value, positive and negative)
• 3. After moving the mouse over the image, the image is paused (setInterval, clearInterval)
• 4. Move the mouse over the image and highlight it (a: hover)
• 5. Click the thumbnail, and the figure below will change.
• 6. Text area changes with the image changes (unsuccessful, to be improved)

Code:

Window. onload = function () {// declaration part (now I am used to writing declarations, so it is easy to forget to write them together .. I don't know.) var oDiv = document. getElementById ('box'); var oUl = oDiv. getElementsByTagName ('ul '); var oLi = oUl. getElementsByTagName ('lil'); var speed = 2; var timer = null; // You can double the content of ul to achieve seamless oUl scrolling. innerHTML = oUl. innerHTML + oUl. innerHTML; oUl. style. width = oLi [1]. offsetWidth * oLi. length + 'px '; // move function move () {oUl. style. left = oUl. offsetLeft + speed + 'px '; // controls the left if (oUl. offsetLeft <-oU L. offsetWidth/2) {oUl. style. left = 0;} // controls the right if (oUl. offsetLeft> 0) {oUl. style. left =-oUl. offsetWidth/2 + 'px';} // click the icon ~ Control the movement direction var oLeft = document. getElementById ('jt _ left'); var oRight = document. getElementById ('jt _ right'); oLeft. onclick = function () {speed =-2;} oRight. onclick = function () {speed = 2;} // move the mouse in and out of oDiv. onmouseover = function () {clearInterval (timer);} oDiv. onmouseout = function () {timer = setInterval (move, 20);} timer = setInterval (move, 20); // click to obtain the larger image var aA = oDiv. getElementsByTagName ('A'); for (var I = 0; I
The final text replacement effect. I wanted to use the image method to change the number corresponding to the text box ~~ The results failed. I don't know the reason. In this regard, we still need to improve. I hope you can provide some good suggestions. However, it is still normal to implement seamless rolling in js, and I hope it will be helpful to everyone.