Javascript realizes seamless scrolling of images_javascript skills-JS Tutorial-php.cn

Effect: When the mouse moves into the picture, the scrolling stops, when the mouse moves out, it automatically scrolls

Can adjust scrolling to left or right direction

Copy code The code is as follows: * { margin: 0; padding: 0; } #div1 { overflow: hidden; width: 712px; Height: 108px; margin: 100px auto; position: relative; background: red; } #div1 ul { position: absolute; left: 0; top: 0; } #div1 ul li { float: left; width: 178px; Height: 108px; list-style: none; }

Copy code The code is as follows: Go left Go right & Lt; img src = "IMG/seamless scrolling /1.jpg"/& gt;

The above is a simple layout, and the following is the main Javascript code

Copy code

The code is as follows: window.onload = function() { var oDiv = document.getElementById("div1"); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var speed = 2; oUl.innerHTML = oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length 'px'; function move() { if (oUl.offsetLeft oUl.style.left = '0'; } if (oUl.offsetLeft > 0) { oUl.style.left = -oUl.offsetWidth / 2 'px'; } oUl.style.left = oUl.offsetLeft speed 'px'; } var timer = setInterval(move, 30); oDiv.onmouseover = function() { clearInterval(timer); }; oDiv.onmouseout = function() { timer = setInterval(move, 30); }; document.getElementsByTagName('a')[0].onclick = function() { speed = -2; }; document.getElementsByTagName('a')[1].onclick = function() { speed = 2; }; } 简单讲下思路：

首先设置ul 里面的图片一共有8张 oUl.innerHTML = oUl.innerHTML;

在 计算ul的宽度为 li的实际宽度*8

之后将 多余的内容隐藏

注意 ： oUl.offsetLeft 肯定是负值

所以判断的时候不要把负号漏掉

复制代码 代码如下: if (oUl.offsetLeft oUl.style.left = '0'; }

This paragraph means that the picture has been scrolled halfway, quickly pull the picture back, because the program executes too fast, so it is almost invisible to achieve seamless scrolling

Finally, use the variable speed to control scrolling in the left and right directions.

The above code only implements the most basic functions, and friends can continue to improve on this basis.