特效描述:图片无缝滚动。js图片无缝滚动向上无缝滚动特效代码下载
代码结构
1. HTML代码
<div class="demo"> <div id="leftDir"><<</div> <div id="scrollbox"> <div id="scrollcon"> <div id="scrollpic"> <a href="http://www.51qianduan.com/"><img src="images/1.jpg" width="192" height="128" alt="" /></a> <a href="http://www.51qianduan.com/"><img src="images/2.jpg" width="192" height="128" alt="" /></a> <a href="http://www.51qianduan.com/"><img src="images/3.jpg" width="192" height="128" alt="" /></a> <a href="http://www.51qianduan.com/"><img src="images/4.jpg" width="192" height="128" alt="" /></a> <a href="http://www.51qianduan.com/"><img src="images/5.jpg" width="192" height="128" alt="" /></a> </div> <div id="scrollpic-copy"></div> </div> </div> <div id="rightDir">>></div> </div> <script type="text/javascript"> //上下无缝滚动 var speed = 10; var direction="top"; var tab = document.getElementById("scrollbox"); var tab1 = document.getElementById("scrollpic"); var tab2 = document.getElementById("scrollpic-copy"); var leftDir = document.getElementById("leftDir"); var rightDir = document.getElementById("rightDir"); tab2.innerHTML = tab1.innerHTML; function marquee(){ switch(direction){ case "top": if(tab2.offsetHeight - tab.scrollTop <= 0){ tab.scrollTop -= tab1.offsetHeight; } else{ tab.scrollTop++; } break; case "bottom": if(tab.scrollTop <= 0){ tab.scrollTop += tab2.offsetHeight; } else{ tab.scrollTop--; } break; } } function changeDirection(dir){ direction = dir; } var timer = setInterval(marquee,speed); tab.onmouseover = function(){clearInterval(timer);}; tab.onmouseout = function(){timer = setInterval(marquee,speed);}; leftDir.onclick = function(){changeDirection("top");}; rightDir.onclick = function(){changeDirection("bottom");}; </script>