<!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>
此方式暂不能实现无限向右滚动,会出现突然的恢复初始值状态,有实现的可以共享谢谢!!@么么哒