js 图片实现无缝滚动
Posted 朝颜陌
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 图片实现无缝滚动相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body,ul{margin:0;padding:0;} div{position:relative;width:680px;height:170px;border:1px solid black;margin:10px auto;overflow:hidden;} ul{position:absolute;left:0;top:0;} li{width:150px;height:150px;padding:10px;float:left;list-style:none;} img{width:150px;height:150px;} </style> <script> window.onload = function(){ var oDIV = document.getElementsByTagName(‘div‘)[0]; var oUl = oDIV.getElementsByTagName(‘ul‘)[0]; var arrLi = oUl.getElementsByTagName(‘li‘); var arrA = document.getElementsByTagName(‘a‘); var timer = null; var speed = 10; oUl.innerHTML += oUl.innerHTML; oUl.style.width = arrLi.length*arrLi[0].offsetWidth+‘px‘; timer = setInterval(scrollPicture,100) arrA[0].onclick = function(){ speed = -10; }; arrA[1].onclick = function(){ speed = 10; }; for(var i=0;i<arrLi.length;i++){ arrLi[i].onmouseover = function(){ clearInterval(timer); } arrLi[i].onmouseout = function(){ timer = setInterval(scrollPicture,100) } } /*原理：走到一半给拉回来*/ function scrollPicture(){ if(oUl.offsetLeft < -oUl.offsetWidth/2){ //向左走 oUl.style.left = 0; }else if(oUl.offsetLeft >0){ oUl.style.left = -oUl.offsetWidth/2+‘px‘; //向右走 } oUl.style.left = oUl.offsetLeft+speed+‘px‘; } }; </script> </head> <body> <a href="javascript:;"> < </a> <a href="javascript:;"> > </a> <div> <ul> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> </ul> </div> </body> </html>
以上是关于js 图片实现无缝滚动的主要内容，如果未能解决你的问题，请参考以下文章
JS实现图片无缝滚动特效；附addEventListener()方法offsetLeft和offsetWidth属性。