【www.bbyears.com--js教程】
效果如下：
代码如下：
代码如下
ul, li { padding: 0; margin: 0; }
li { list-style: none; }
.box {
width: 800px;
height: 450px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.box span {
width: 40px;
height: 60px;
display: block;
position: absolute;
top: 225px;
margin-top: -20px;
cursor: pointer;
z-index: 1;
}
.box #left {
background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042311cbd7gbjd7sggkd2b.png') no-repeat;
left: 0;
}
.box #right {
background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042241w8z4hx4m4pjhyjzs.png') no-repeat;
right: 0;
}
#ad {
width: 4000px;
height: 450px;
position: absolute;
}
#ad li {
float: left;
}
<scripttype="text/javascript">
window.onload = function(){
var ad = document.getElementById("ad");
var timer = null;//管理定时器
var leader = 0;
//1秒之后再开启定时器
timer = setTimeout(function(){
timer = setInterval(autoAd,30);
},1000);
//开启定时器
function autoAd(){
leader -=5;
leader<=-3200?leader = 0:leader;
ad.style.left = leader +"px";
}
//鼠标划入 关闭定时器
ad.onmouseover = function() {
clearInterval(timer);
}
//鼠标离开 开启定时器
ad.onmouseout = function(){
timer = setInterval(autoAd,20);
}
}
</script>