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

Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft)

2016-11-06 18:56 916 查看

1、无缝滚动

原理：（1）让div动起来，让ul一直向左/向右移动；

（2）即利用定时器让物体从左到右或从右到左进行滚动。

采用offsetLeft——如oUl.style.left=oUl.offsetLeft-2+'px';（由左向右）

注意：offsetLeft为一个负值。

步骤：（1）复制li——innerHTML和+=，

（2）修改ul的width—可把之前的1倍宽度扩充到两倍

例如oUl.innerHTML=oUl.innerHTML+oUl.innerHTML；

（3）滚动过界时，重设位置，需要进行判断

2、无缝滚动的扩展

（1）改变滚动的方向

a、修改滚动的速度speed

若改变大小，即表示滚动的速度发生改变

若改变正负，即表示滚动的方向

b、修改判断条件

通过修改speed的正负，来改变滚动的方向

（2）鼠标移入、暂停事件

a、鼠标移入：关闭定时器clearInterval(timer);

b、鼠标移出：重新开启定时器，即setInterval(function,1000);

相关的代码如下：

<span style="font-family:KaiTi_GB2312;font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器实现的图片无缝滚动</title>
<style>
*{padding: 0;margin: 0;}
#div1{
position: relative;
width:820px;height: 155px;
margin: 100px auto;
overflow: hidden;}
#div1 ul{
position:absolute;
top:0;left: 0;
background: #5F9EA0;
}
#div1 ul li{
list-style: none;
width: 205px;height: 155px;
float: left;
}
</style>
<script>

window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');

var speed=2;  //利用速度speed控制方向；

oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
//求ul的宽度；
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

//移动的函数；
function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
//由于offsetLeft为一个负值，所以需要加一个负号；
oUl.style.left='0';
}
//由右向左；
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
//由左向右；
oUl.style.left=oUl.offsetLeft+speed+'px';
}

var timer=setInterval(move,30);
//鼠标移入，关闭定时器；
oDiv.onmouseover=function(){
clearInterval(timer);
};
//鼠标移出，开启定时器；
oDiv.onmouseout=function(){
timer=setInterval(move,30);
};

document.getElementsByTagName('a')[0].onclick=function(){
speed=-2;
};
document.getElementsByTagName('a')[1].onclick=function(){
speed=2;
}
};
</script>
</head>
<body>
<a href="javascript:;">向左</a>
<a href="javascript:;">向右</a>
<div id="div1">
<ul>
<li><img src="img/p1.png"></li>
<li><img src="img/p2.png"></li>
<li><img src="img/p3.png"></li>
<li><img src="img/p4.png"></li>
</ul>
</div>
</body>
</html></span><span style="font-size: 18px;">
</span>

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

标签： 图片无缝滚动 offsetleft setInterval clearInterval

相关文章推荐

新的分享

章节导航