原生Javascript实现图片无缝滚动

转载 (原文地址) 有招网 随笔 ios 843阅读 2014-08-26 14:28:00 举报

用原生Javascript写的一个图片无缝滚动,可以自动滚动,下面就来详细的看一下吧。
首先是布局,布局不是很难,主要是用ul列表把n张图片排列放在一起,另外还要设置超出父容器时隐藏;另外就是两个按钮了,用来改变滚动的方向,让它们始终在所有图片之上,不再多说。下面看下html和css代码:
html部分:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="oDiv" id="oDiv">
<a href="#" class="btn leftBtn"></a>
<a href="#" class="btn rightBtn"></a>
<ul>
<li><a href="#"><img src="images/01.jpg"></a></li>
<li><a href="#"><img src="images/02.jpg"></a></li>
<li><a href="#"><img src="images/03.jpg"></a></li>
<li><a href="#"><img src="images/04.jpg"></a></li>
<li><a href="#"><img src="images/05.jpg"></a></li>
<li><a href="#"><img src="images/06.jpg"></a></li>
<li><a href="#"><img src="images/07.jpg"></a></li>
<li><a href="#"><img src="images/08.jpg"></a></li>
</ul>
</div>
css部分:
1
2
3
4
5
6
7
8
9
10
11
12

  • {margin: 0; padding: 0;}
    img {border: 0;}

.oDiv {position: relative; margin: 0 auto; margin-top: 50px;padding: 0 30px 0 30px; width: 530px; height: 180px; background: #333; overflow: hidden;}
.oDiv ul {position: absolute; list-style: none; margin: 10px 0 0 0; height: 160px;}
.oDiv ul li {float: left; margin-left: 10px; margin-top: 0; width: 120px; height: 160px;}
.oDiv ul li img {width: 120px; height: 160px;}
.oDiv .btn {position: absolute; display: block; top: 10px; width: 30px; height: 160px; background-color: #333; background-repeat: no-repeat; background-position: center center; z-index: 100;}
.oDiv .leftBtn {left: 0; background-image: url(images/btn-left.png);}
.oDiv .rightBtn {right: 0; background-image: url(images/btn-right.png);}
.oDiv .leftBtn:hover {background-image: url(images/btn-left-hover.png);}
.oDiv .rightBtn:hover {background-image: url(images/btn-right-hover.png);}
下面来看js代码:
取id与取class函数:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var $$ = function (id) {
return document.getElementById(id);
}

var getByClass = function (parent, className) {
var aEle = parent.getElementsByTagName("*");
var re = new RegExp(""+className+"", "i");
var arr = [];
for (var i = 0; i < aEle.length; i++) {
if (re.test(aEle[i].className)) {
arr.push(aEle[i]);
}
}
return arr;
}
控制滚动,首先要把ul内的所有li复制一份,连接在原来的li列表之后,这样不至于原来的li滚动完后出现空白,然后通过动态地改变xxx.style.left使图片滚动,当所有图片滚动到一半时,在这一瞬间再把所有图片拉回到起始位置,然后再通过改变style.left使其运动,这样反复的执行,所有图片看起来就像是连续向一个方向滚动一样。

js代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
onload = function () {
var oUl = $$("oDiv").getElementsByTagName("ul")[0];
var aLi = $$("oDiv").getElementsByTagName("li");
var oLeftBtn = getByClass($$("oDiv"), "leftBtn")[0];
var oRightBtn = getByClass($$("oDiv"), "rightBtn")[0];
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = (aLi[0].offsetWidth + 10) * aLi.length + 10 + "px";
var speed = -5;
var timer;

var scroll = function () {
    timer = setInterval(function () {
        oUl.style.left = oUl.offsetLeft +speed + "px";
        if (oUl.offsetLeft <= -oUl.offsetWidth/2) {
            oUl.style.left = 0;
        } else if (oUl.offsetLeft >= 0) {
            oUl.style.left = -oUl.offsetWidth/2 + "px";
        }
    }, 30);
}

oLeftBtn.onclick = function () {
    speed = -5;
}

oRightBtn.onclick = function () {
    speed = 5;
}

oUl.onmouseover = function () {
    clearInterval(timer);
}

oUl.onmouseout = scroll;

scroll();

}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复