js图片无缝滚动向上无缝滚动特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

25 98 33



特效描述:图片无缝滚动。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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滚动切换 图片滚动 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到