首页 > 代码库 > js 图片无缝循环
js 图片无缝循环
<html><head><title>Js图片无缝滚动</title><style type="text/css">body{ background:gray;}#wrap{ width:810px; height:200px; border:1px solid black; position:relative; left:50%; top:50%; margin-left:-410px; margin-top:-250px; background:#F5E0E3; overflow:hidden;}#wrap ul{ margin:0px; padding:0px; position:absolute; top:0px; left:0px;}#wrap ul li{ list-style:none; float:left; margin:5px 10px;}#wrap ul li img{ width:250px; height:180px; cursor:pointer;}.direction{ width:104px; margin:50px auto;}.direction img{ border:1px dotted pink; cursor:pointer;}.active{ border:2px solid gray;}</style><script type="text/javascript">window.onload = function(){ var ul = document.getElementById("wrap").getElementsByTagName("ul")[0]; var lis = ul.getElementsByTagName("li"); var btn1 = document.getElementById("button1"); var btn2 = document.getElementById("button2"); var imgs = ul.getElementsByTagName("img"); var speed = 3; var time = null; ul.innerHTML += ul.innerHTML; ul.style.width = (lis[0].offsetWidth+20)*lis.length + "px"; time = setInterval(function(){ ul.style.left = ul.offsetLeft - speed + "px"; if(ul.offsetLeft <= -ul.offsetWidth/2){ ul.style.left ="0px"; }else if(ul.offsetLeft >=0){ ul.style.left = -ul.offsetWidth/2 + "px"; } },30); btn1.onmouseover = function(){ speed = 3; } btn2.onmouseover = function(){ speed = -3; } for(var i in imgs){ imgs[i].onmouseover = function(){ clearInterval(time); for(var i = 0;i<imgs.length;i++){ imgs[i].className = "none"; } this.className = "active"; } imgs[i].onmouseout = function(){ time = setInterval(function(){ ul.style.left = ul.offsetLeft - speed + "px"; if(ul.offsetLeft <= -ul.offsetWidth/2){ ul.style.left ="0px"; }else if(ul.offsetLeft >=0){ ul.style.left = -ul.offsetWidth/2 + "px"; } },30); for(var i = 0;i<imgs.length;i++){ imgs[i].className = "none"; } } }}</script></head><body> <div class="direction"><img src="http://www.mamicode.com/jscss/demoimg/201204/left.png" id="button1"/><img src="http://www.mamicode.com/jscss/demoimg/201204/right.png" id="button2"/></div> <div id="wrap"> <ul> <li><img src="http://www.mamicode.com/jscss/demoimg/wall1.jpg" alt="pic one" /></li> <li><img src="http://www.mamicode.com/jscss/demoimg/wall2.jpg" alt="pic two" /></li> <li><img src="http://www.mamicode.com/jscss/demoimg/wall3.jpg" alt="pic three" /></li> <li><img src="http://www.mamicode.com/jscss/demoimg/wall4.jpg" alt="pic four" /></li> </ul> </div></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。