读前笑一笑
一男女朋友正卿卿我我，男想进一步。男：你是处女吗？
女：嗯，你是处男吗？男：当然了！女：这是第一次，我怕疼，还是不要了吧。
男：我会很小心的，不会疼。女：你们每个男人每次都这样说，结果我每次都很疼…
男：那是因为他们都是新手~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> 四方向无缝滚动，悬停 </title>
<style type="text/css">
/* 自定义样式 */
body, ol { margin: 0; padding: 0; font: 12px/30px 'microsoft yahei'; }
li { list-style: none ; width: 200px; height: 200px; background-color: #ccc; font: 20px/200px 'microsoft yahei'; text-align: center;}
.m-box { width: 200px; height: 200px; margin: 50px auto;}
.horizontal_prev,.vertical_prev,.horizontal_next,.vertical_next { display: inline-block; border: 1px #ccc solid; width: 200px; margin: 0 10px; text-align: center; background-color: #f3f3f3;}
/*必须样式,box宽高视实际情况而定*/
.m-box { position: relative; overflow: hidden; }
.m-box .inner { position: absolute; top: 0; left: 0;}
.m-box .inner li { float: left; }
</style>
</head>
<body>
<!-- 横向滚动 -->
<div id="horizontal" class="m-box">
<ol class="inner">
<li>横1</li>
<li>横2</li>
<li>横3</li>
<li>横4</li>
</ol>
</div>
<!-- 竖向滚动 -->
<div id="vertical" class="m-box">
<ol class="inner">
<li>竖1</li>
<li>竖2</li>
<li>竖3</li>
<li>竖4</li>
</ol>
</div>
<script type="text/javascript">
window.onload = function (){
/**
* obj(id) 必选
* oInner([inner]) 滚动的内容，默认div>ol>li结构
* aList([list]) 滚动的每一项，默认div>ol>li结构
* iSpeed([number]) 正向右/下，负向左/上，默认横向向左，竖向向上,默认10
* oButs([bool]) 是否需要左右按钮，默认无
* sDirection([str]) 横向还是竖向，v:竖向，h:横向，默认h
*/
//注意，oButs为true时，按钮在obj这个盒子外，class分别为obj_prev prev or obj_next next
new Rolling({obj:'horizontal',sDirection:'h', oButs:true});
new Rolling({obj:'vertical',sDirection:'v', oButs:true});
};
Rolling.prototype.fnRoll = function() {
//自增或自减
this.oInner.style[this.attr[0]] = this.oInner[this.attr[1]]+this.iSpeed+'px';
if(this.oInner[this.attr[1]]<-this.oInner[this.attr[2]]/2) {
this.oInner.style[this.attr[0]] = '0px';
} else if(this.oInner[this.attr[1]]>=0) {
this.oInner.style[this.attr[0]] = -this.oInner[this.attr[2]]/2+'px';
}
};
//事件绑定
Rolling.prototype.Events = {
bindEvent : function (obj, ev, fn){obj.attachEvent?obj.attachEvent('on'+ev, fn):obj.addEventListener(ev, fn, false)}
};
function Rolling(conf){
var that = this;
this.timer = null;
this.iSpeed = conf.iSpeed || 10;
this.obj = document.getElementById(conf.obj);
this.oInner = conf.oInner || this.obj.getElementsByTagName("ol")[0];
this.alist = conf.alist || this.oInner.getElementsByTagName("li");
this.direction = conf.sDirection || 'h';
this.attr = [];
this.buts = conf.oButs;
//复制要滚动的内容
this.oInner.innerHTML += this.oInner.innerHTML;
//注意，需要加上单位px
if(this.direction == 'h'){
this.attr = ["left", "offsetLeft", "offsetWidth"];
this.oInner.style.cssText = ""+this.alist.length*this.alist[0].offsetWidth + 'px'+"; height:"+this.alist[0].offsetHeight + 'px'+";";
}else if (this.direction == 'v'){
this.attr = ["top", "offsetTop", "offsetHeight"];
this.oInner.style.cssText = ""+ this.alist[0].offsetWidth + 'px'+"; height:"+this.alist.length*this.alist[0].offsetHeight + 'px'+";";
}
//开定时器，并且清空上一次的定时器
clearInterval(this.timer);
this.timer = setInterval(function(){
that.fnRoll();
}, 30);
//鼠标放上去停止，移走继续滚动
Rolling.prototype.Events.bindEvent(this.obj, 'mouseover', function(){clearInterval(that.timer);});
Rolling.prototype.Events.bindEvent(this.obj, 'mouseout', function(){
that.timer = setInterval(function(){
that.fnRoll();
},30);
});
//按钮
this.buts && (function(){
var l = document.createElement("a"),
lTxt = that.direction == 'h' ? document.createTextNode("左") : document.createTextNode("上"),
r = document.createElement("a"),
rTxt = that.direction == 'h' ? document.createTextNode("右") : document.createTextNode("下");
//左、上
l.appendChild(lTxt);
l.className = conf.obj+'_prev';
that.obj.parentNode.appendChild(l);
//右、下
r.appendChild(rTxt);
r.className = conf.obj+'_next';
that.obj.parentNode.appendChild(r);
//方向
Rolling.prototype.Events.bindEvent(l, 'mouseover', function(){that.iSpeed = -that.iSpeed});
Rolling.prototype.Events.bindEvent(r, 'mouseover', function(){that.iSpeed = -that.iSpeed});
}());
}
</script>
</body>
</html>