首页 > 代码库 > 关于网页上图片无缝滚动的一些思路
关于网页上图片无缝滚动的一些思路
从现在的一些常见网站上，无缝滚动的例子用得非常普遍，可以说很常见，也比较实用，下面我们就来简单看看，具体的一些想法怎么实现的：
先简单来看一下原理：
首先我们看到网页上一组图片不停滚动，一次循环之后又从第一张开始，其实简单的思路是：我们设置两组图片，当第一组图片滚动到结尾时，对应的第一组图片又瞬间拉回到起始位置。
当图片向另外一个方向滚动时，当后面一组图片滚动到结尾时：也是瞬间拉回到开头。
下面我们简单来看一下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{ margin: 0;padding: 0; } //页面的简单布局
#div1{ width: 600px;height: 120px;border: 1px solid #ccc; margin: 10px auto;position: relative;overflow:hidden;}
#div1 ul{ list-style-type: none;height:120px;position: absolute;left: 0;top: 0; }
#div1 ul li{float: left;width: 100px;height: 100px;padding: 10px;}
</style>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById("ul1");
var oLi = oUl.getElementsByTagName(‘li‘);
var timer = null; //声明一个接受定时器返回值的变量，初始值为空
var iSpeed = -2;
oUl.style.width = (oLi.length)*oLi[0].offsetWidth+‘px‘; //动态的添加UL的长度，这样可以适应布局
timer=setInterval(function(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){ //首先向左滚动，如果滚到一半，此时left应该是-oUl.offsetWidth/2，我们就将他拉回来到起始的位置
oUl.style.left = 0+‘px‘;
}
if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/2+‘px‘; //同理向右跑到一半，原理一样，就拉回来
}
oUl.style.left = oUl.offsetLeft+iSpeed+‘px‘;
},30);
oUl.onmouseover = function(){ //鼠标移入到图片上时，就停止运动
clearInterval(timer);
}
oUl.onmouseout = function(){
timer=setInterval(function(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){ //鼠标移出时，又开始运动
oUl.style.left = 0+‘px‘;
}
if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/2+‘px‘; //向右跑到一半，就拉回来
}
oUl.style.left = oUl.offsetLeft+iSpeed+‘px‘;
},30);
}
}
</script>
</head>
<body>
<div id="div1">
<ul id="ul1"> //这里我们设置了两组图片
<li><img src="http://www.mamicode.com/img/宁静的海1.jpg"></li>
<li><img src="http://www.mamicode.com/img/就这样1.jpg"></li>
<li><img src="http://www.mamicode.com/img/宁静1.jpg"></li>
<li><img src="http://www.mamicode.com/img/bus1.jpg"></li>
<li><img src="http://www.mamicode.com/img/cry1.jpg"></li>
<li><img src="http://www.mamicode.com/img/宁静的海1.jpg"></li>
<li><img src="http://www.mamicode.com/img/就这样1.jpg"></li>
<li><img src="http://www.mamicode.com/img/宁静1.jpg"></li>
<li><img src="http://www.mamicode.com/img/bus1.jpg"></li>
<li><img src="http://www.mamicode.com/img/cry1.jpg"></li>
</ul>
</div>
</body>
</html>
当然我么可以简化代码：
function startMove(){
timer=setInterval(function(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){ //鼠标移出时，又开始运动
oUl.style.left = 0+‘px‘;
}
if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/2+‘px‘; //向右跑到一半，就拉回来
}
oUl.style.left = oUl.offsetLeft+iSpeed+‘px‘;
},30);
}
将这段重复代码写成一个函数，后面直接调用即可。 而且，我么可以添加一个向左或者向右的按钮：
oBtn1.onclick = function(){
iSpeed = -2;
}
oBtn2.onclick = function(){
iSpeed = 2;
}
通过设置速度的正负值，来改变方向。
关于网页上图片无缝滚动的一些思路