水平滚动的问题
下面代码实现的是连续的水平滚动。我希望的是在一张图片完全显示后停留n秒。老师说因为滚动用了间歇调用，如果再用间歇调用来实现会冲突。
如果想达到这样的效果，代码应该怎么写，请老师给个思路
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.main{
width: 200px;
height: 200px;
margin: 50px auto;
overflow: hidden;
}
.menu{
width: 1600px;
height:200px;
}
.menuBox{
width: 200px;
height: 200px;
background:no-repeat;
float: left;
display: block;
}
.box1{
background-image:url(img/1.jpg);
background-size:100% 100%;
}
.box2{
background-image:url(img/2.jpg);
background-size:100% 100%;
}
.box3{
background-image:url(img/3.jpg);
background-size:100% 100%;
}
.box4{
background-image:url(img/4.jpg);
background-size:100% 100%;
}
.box5{
background-image:url(img/5.jpg);
background-size:100% 100%;
}
.box6{
background-image:url(img/6.jpg);
background-size:100% 100%;
}
.box7{
background-image:url(img/7.jpg);
background-size:100% 100%;
}
.box8{
background-image:url(img/8.jpg);
background-size:100% 100%;
}
</style>
</head>
<body>
<!--最外层盒子-->
<div class="main" id="main" style="position: relative;">
<!--盛放图片的盒子-->
<div class="menu" id="menu" style="position: absolute;
left: 0;top:0;">
<div class="menuBox box1"></div>
<div class="menuBox box2"></div>
<div class="menuBox box3"></div>
<div class="menuBox box4"></div>
<div class="menuBox box5"></div>
<div class="menuBox box6"></div>
<div class="menuBox box7"></div>
<div class="menuBox box8"></div>
</div>
</div>
<script type="text/javascript">
function out() {
function byid(id) {
return typeof(id)==='string'?document.getElementById(id):id;
}
var main=byid('main');
var menu=byid('menu');
var menuleft=parseInt(menu.style.left);
var timer=null;
var t=null;
var box=menu.getElementsByTagName('div');
main.onmouseout=function() {
timer=setInterval(item,20);
function item() {
menu.style.left=menuleft+'px';
menuleft--;
if(menuleft<=-1400){
menuleft=0;
}
}
}
main.onmouseout();
}
out()
</script>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星