<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#div_img {
height: 300px;
width: 900px;
background: red;
position: relative;
margin: 100px auto;
overflow: hidden;
}
#div_img ul {
position: absolute;
left: 0px;
top: 0px;
}
#div_img ul li {
float: left;
width: 300px;
height: 300px;
list-style: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
var odiv = document.getElementById('div_img');
var oul = odiv.getElementsByTagName('ul')[0];
var oli = oul.getElementsByTagName('li');
oul.innerHTML += oul.innerHTML;
oul.style.width = oli[0].offsetWidth * oli.length + "px";
var timer = null;
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 + 2 + "px";
};
timer = setInterval(move, 30);
odiv.onmouseover = function () {
clearInterval(timer);
};
odiv.onmouseout = function () {
timer = setInterval(move, 30);
};
};
</script>
<div id="div_img">
<ul>
<li><img src="imgs/1.jpg" /></li>
<li><img src="imgs/3.jpg" /></li>
<li><img src="imgs/4.jpg" /></li>
</ul>
</div>
用JavaScript实现无缝滚动,当鼠标移上去时,图片停止滚动,当鼠标移开时,图片继续开始滚动。
下面有如下这张示意图来讲解无缝滚动的核心思想:
其核心思想如下:如果使用三张图片进行滚动,那么不好操作,一遍还没滚完,图片的的背景就会露出来,可以使其变成重复的两份,用oul.innerHTML += oul.innerHTML;实现,其效果图如上图的示意图1. 这时候让图片开始向左滚动,当前面的三张图片滚动完后,其效果图如示意图2,这样和用户第一次看到的情况完全相同,注意是完全相同,这样我们就可以使用一个障眼法,就是:每当图片滚动到这样的时候,我们把整个图片往右拉三张的距离,如示意图3,其就又变成了最开始的样子,继续滚动。这样就实现了无缝滚动的效果。