JS特效——广告图由左往右滚动

最新推荐文章于 2019-01-08 15:50:01 发布

WebCsDn_TDCode

最新推荐文章于 2019-01-08 15:50:01 发布

阅读量481

点赞数

分类专栏：前端文章标签：广告

本文链接：https://blog.csdn.net/qq_42396791/article/details/82347844

版权

前端专栏收录该内容

70 篇文章 0 订阅

订阅专栏

<!DOCTYPE>
<html>

	<head>
		<title>从左到右滚动广告效果</title>
		<meta charset="utf-8">
		<style>
			#container {
				margin: 100px auto;
				width: 800px;
				visibility: visible;
				overflow: hidden;
				z-index: 2;
			}
			
			#con-ul {
				margin: 0;
				padding: 0;
				list-style-type: none;
				z-index: 1;
				width: 2410px;
				height: 262px;
			}
			
			li {
				float: left;
				margin: 0 5px;
				overflow: hidden;
			}
			
			img {
				display: block;
				border: 1px solid red;
				width: 255px;
				height: 260px;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<ul id="con-ul" style="position: relative; left: 0;">
				<li>
					<img src="http://pic.qiantucdn.com/58pic/19/41/18/56cd42c01a231_1024.jpg" height="300" width="260">
				</li>
				<li>
					<img src="http://pic13.nipic.com/20110409/6837727_095610716119_2.jpg">
				</li>
				<li>
					<img src="http://seopic.699pic.com/photo/50047/8124.jpg_wh1200.jpg">
				</li>
				<li>
					<img src="http://pic.58pic.com/58pic/13/01/11/92Q58PICHzZ.jpg">
				</li>
				<li>
					<img src="http://img5.duitang.com/uploads/item/201509/25/20150925110719_HtTCj.jpeg">
				</li>
				<li>
					<img src="http://pic36.photophoto.cn/20150814/0005018308986502_b.jpg">
				</li>
				<li>
					<img src="http://pic33.photophoto.cn/20141021/0005018321714288_b.jpg">
				</li>
				<li>
					<img src="http://img3.3lian.com/2013/c4/95/d/18.jpg">
				</li>
				<li>
					<img src="http://pic4.nipic.com/20091023/3598734_131226074651_2.jpg">
				</li>
			</ul>
		</div>
		<script>
			window.onload = init;
			let conUl = document.getElementById('con-ul');
			let timer = null;

			function init() {
				timer = setInterval(common, 30);
			}
			// 把定时器函数封装
			function common() {
				let left = parseInt(conUl.style.left);
				conUl.style.left = (left - 1) + 'px';
				// 判断left距离是否到了ul宽度的三分之二，如果是就把left设置为零
				if(Math.abs(parseInt(conUl.style.left)) === parseInt(conUl.offsetWidth * 2 / 3)) {
					conUl.style.left = 0;
				}
			}
			// 鼠标移入清除定时器
			conUl.onmousemove = function() {
				clearInterval(timer);
			}
			// 鼠标移除重新设置定时器
			conUl.onmouseout = function() {
				timer = setInterval(common, 30);
			}
		</script>
	</body>

</html>

此方式暂不能实现无限向右滚动，会出现突然的恢复初始值状态，有实现的可以共享谢谢！！@么么哒

WebCsDn_TDCode

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS特效——广告图由左往右滚动

&lt;!DOCTYPE&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;从左到右滚动广告效果&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; #container { margin: 100px auto; width: 800px;
复制链接

扫一扫