这样的代码网上能够找到很多,我出于学习目的自己写了一个,参考了cloudgamer的代码,滚动的原理参见参考资料。
我试着解释一下原理:
这里主要使用了scrollLeft属性,表示元素内容滚动到左边的距离。我们需要一个滚动元素,还需要一个父元素将滚动元素包裹起来,并且父元素的宽度要比滚动元素小,这样就会出现滚动条,当然了,这需要设置父元素的overflow属性的值为hidden,保证超出父元素宽度的滚动元素隐藏起来。
为了达到无缝滚动的效果,我们需要将滚动元素复制两份,通过不断修改父元素的scrollLeft属性达到让内容滚动的效果,当scrollLeft的值等于内容宽度的一半时(这是向左滚动的情况),就让scrollLeft重置为0,如此不断反复。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript">
var $, isElement, e= {};
$ =function(id) {
returntypeof id ==='string'? document.getElementById(id) : id;
};
isElement =function(o) {
return!!(o && o.nodeType ==1);
};
(function() {
if(window.event) {
e.addEvent =function(target, eventName, handler) {
target.attachEvent('on'+ eventName, handler);
}
e.removeEvent =function(target, eventName, handler) {
target.deattachEvent('on'+ eventName, handler);
}
e.getTarget =function() {
return window.event.srcElement;
}
} else {
e.addEvent =function(target, eventName, handler) {
target.addEventListener(eventName, handler, false);
}
e.removeEvent =function(target, eventName, handler) {
target.removeEventListener(eventName, handler);
}
e.getTarget =function(even) {
return even.target;
}
}
}());
var Scroll = {
innerElem : null, //需要滚动的对象
outerElem : null, //滚动元素的外层元素
innerElemOffsetWidth : null, //滚动元素的宽度,因为是固定值,所以只要在初始化时计算一次即可
speed : 5, //滚动速度,默认5个像素
interval : 100, //间隔时间,默认50毫秒滚动一次
pauseTime : 1000, //停顿时间
__id : null,
currentDirections : 'L', //当前滚动方向
init : function(outerElem, innerElem) {
if(isElement(innerElem) && isElement(outerElem)) {
this.innerElem = innerElem;
this.outerElem = outerElem;
this.innerElem.appendChild(this.innerElem.cloneNode(true));
this.innerElemOffsetWidth =this.innerElem.offsetWidth;
var self =this;
e.addEvent(this.innerElem, 'mouseover', function() {
self.stop();
});
e.addEvent(this.innerElem, 'mouseout', function() {
self.begin();
});
}
this.scroll();
},
begin : function() {
this.scroll();
},
stop : function() {
clearInterval(this.__id);
},
scroll : function() {
var self =this,
time = self.interval,
obj = self.outerElem;
switch(self.currentDirections) {
case'L':
if(obj.scrollLeft == self.innerElemOffsetWidth /2) {
obj.scrollLeft =0;
time = self.pauseTime;
} else {
obj.scrollLeft += self.speed;
}
break;
case'R':
if(obj.scrollLeft ==0) {
obj.scrollLeft = self.innerElemOffsetWidth /2;
time = self.pauseTime;
} else {
obj.scrollLeft -= self.speed;
}
break;
}
self.__id = setTimeout(function() {
self.scroll();
}, time);
},
turnLeft : function() {
this.currentDirections ='L';
},
turnRight : function() {
this.currentDirections ='R';
}
}
e.addEvent(window, 'load', function() {
Scroll.init($('idScroller'), $('wrap'));
e.addEvent($('toLeft'), 'click', function(even) {
Scroll.turnLeft();
});
e.addEvent($('toRight'), 'click', function(even) {
Scroll.turnRight();
});
})
</script>
</head>
<body>
<div id="idScroller" style="width:290px; overflow:hidden">
<div style="width:2000px">
<div id="wrap" style="float:left;">
<div style="float:left"> <img src="1.png" width="150px" height="150px;"/> </div>
<div style="float:left"> <img src="2.png" width="150px" height="150px;"/> </div>
</div>
</div>
</div>
<input type="button" id="toLeft" value="向左"/>
<input type="button" id="toRight" value="向右"/>
</body>
</html>