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>