您的位置：首页 > Web前端 > JavaScript

无缝滚动，JavaScript

2015-10-20 20:37 621 查看

好想哭，不容易啊，终于磕磕绊绊写了一个稍微难一点的东西了，还是要多写几遍啊

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload=function()
{
var odiv=document.getElementById('div1');
var oul=document.getElementById('ul1');
var oli=oul.getElementsByTagName('li');
var speed=2;
var oa=document.getElementsByTagName('a');
oul.innerHTML=oul.innerHTML+oul.innerHTML;
oul.style.width=oli[0].offsetWidth*oli.length+'px'
function move()
{
if(oul.offsetLeft<-oul.offsetWidth/2){
oul.style.left='0';
}
if(oul.offsetLeft>0){
oul.style.left=-oul.offsetWidth/2+'px';
}
oul.style.left=oul.offsetLeft+speed+'px';
};

var timr=setInterval(move,30);
odiv.onmouseover=function(){
clearInterval(timr);
}
odiv.onmouseout=function(){
timr=setInterval(move,30);
}
oa[0].onclick=function(){
speed=-2;
}
oa[1].onclick=function(){
speed=2;
}
};
</script>
<style>
*{padding: 0;margin: 0;}

#div1{position: relative; background: blueviolet;width: 1128px;height: 250px; margin: 0 auto;overflow: hidden;}
ul{position: absolute; left:0;top:0;width: 1128px;height: 250px; }
li{float: left;list-style: none;}
</style>
</head>
<body>
<a href="#">zuo</a>
<a href="#">you</a>
<div id="div1">
<ul id="ul1">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
</ul>
</div>
</body>
</html>

定时器，每30毫秒执行一次，变动left的值

鼠标移入的时候关闭定时器

鼠标离开的时候开打定时器

定义变量speed 点you的时候speed成为-2 图片向友滚动

点zuo的时候，speed成为2，图片向左滚动

还是要多写几遍的。。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航