跑马灯Marquee+JavaScript实现图片无缝匀速轮播滚动源代码

阅读() @2018-10-29 18:16:08

非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用。

源代码如下:

<!doctype html>
<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>图片滚动</title>
		<style type="text/css">
			#demo {
				background: #FFF;
				overflow:hidden;
				border: 1px dashed #CCC;
				width: 550px;
				height:368px;
			}
			#demo img {
				border: 3px solid #F2F2F2;
			}
			#indemo {
				height: 8000%;
			}
		</style>
	</head>
	<body>
	<div id="demo">
		<div id="indemo">
			<div id="demo1">
			<a href="#"><img src="http://www.0351zhuangxiu.com/uploads/images/123.jpg" border="0" /></a>
			<a href="#"><img src="http://www.0351zhuangxiu.com/uploads/images/124.jpg" border="0" /></a>
			<a href="#"><img src="http://www.0351zhuangxiu.com/uploads/images/125.jpg" border="0" /></a>
			<a href="#"><img src="http://www.0351zhuangxiu.com/uploads/images/126.jpg" border="0" /></a>
			<a href="#"><img src="http://www.0351zhuangxiu.com/uploads/images/127.jpg" border="0" /></a>
			<a href="#"><img src="http://www.0351zhuangxiu.com/uploads/images/128.jpg" border="0" /></a>
			</div>
			<div id="demo2"></div>
		</div>
	</div>
	<script type="text/javascript">
		var speed=10;//控制速度
		var tab=document.getElementById("demo");
		var tab1=document.getElementById("demo1");
		var tab2=document.getElementById("demo2");
		tab2.innerHTML=tab1.innerHTML;
		function Marquee(){
			if(tab2.offsetHeight-tab.scrollTop<=0)
				tab.scrollTop-=tab1.offsetHeight;
			else{
				tab.scrollTop++;
			}
		}
		//定时器
		var MyMar=setInterval(Marquee,speed);
		//鼠标滑过停止滚动
		tab.onmouseover=function() {clearInterval(MyMar)};
		//鼠标滑出继续滚动
		tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
	</script>
	</body>
</html>

效果预览 源码下载

加入QQ群,在群文件中免费下载源码提取密码!
微信二维码