js图片水平滚动插件，支持上下滚动

故事起因：

因项目需求，需要一个支持图片+文字的横向滚动的广告插件。网上也稍微的Search过一下，大多都是一些简单的文字图片纵向滚动的代码，也有支持横向滚动的，不过都略微简单了些，而且没有用插件的思想实现（至少在我写之前没看到哦，哈哈）。所以决定自己写一个支持同时横向、纵向滚动的广告插件，只要一句简单的配置代码初始化就可以搞定滚动的广告栏，一处引用，多处可用。

代码实现如下：

Html代码结构:

<span style="font-family:Microsoft YaHei;font-size:14px;"><div class="slider-wrap">
<!—滚动列表-->
<div class="slider-list">
<div class="slider-item">
<!—图片信息或文字信息-->
<img src=……>
</div>
</div>
</div>
</span>

JS代码结构:（Scroll可以单独一个文件出来，也就是一个简单的插件了哦……）

<span style="font-family:Microsoft YaHei;font-size:14px;">/**
* @author cj
* @version 1.0
* email : <a href='mailto:honeychen502@gmail.com' >发送邮件</a>
*/
/**
* @param options{element,direction,height,width}，配置参数
* 滚动面板，支持水平和纵向滚动
*/
var Scroll = function( options ) {
if( !options || typeof options != 'object' ) {
alert("请输入要求配置参数");
return;
}
var settings = {
//目标元素
element : null,
direction : 'vertical',
//列表垂直滚动height长度后停顿
height : null,
//列表水平滚动width长度后停顿
width : null,
speed : 30,
scrollNum : null
};
//配置属性合并
$.extend(settings, options);
if( !settings.element ) {
alert("请输入要滚动元素的ID");
return;
}
if( !settings.scrollNum ) {
alert("请输入要开始滚动的个数");
return;
}
//目标元素
this.element = $(settings.element)[0];
//列表垂直滚动height长度后停顿
this.height = settings.height || this.element.scrollHeight;
//列表水平滚动width长度后停顿
this.width = settings.width || this.element.scrollWidth;
//滚动方向
this.direction = ( settings.direction == 'vertical' ) ? 'vertical' : 'horizontal';
//纵向
this.maxHeight = this.element.scrollHeight;
//水平
this.maxWidth = this.element.scrollWidth;
//计数器
this.counter = 0;
//计时器
this.timer = "";
//当滚动列表不够多时，不用滚动，直接结束
var scrollStartNum = $(settings.element).find(".slider-item").size();
if( scrollStartNum < settings.scrollNum ) {
console.log("面板不用滚动的");
return;
}
//滚动速度
this.speed = settings.speed;
//把元素复制成两份
this.element.innerHTML += this.element.innerHTML;
if( this.direction == 'horizontal' ) {
this.element.innerHTML = '<div style="width:800%;float:left;">' + this.element.innerHTML + '</div>';
}
var scrollFn = ( settings.direction == 'vertical' ) ? this.scrollVertical.bind(this) : this.scrollHorizontal.bind(this);
//鼠标移进来，暂停滚动
this.element.onmouseover = this.stop.bind(this);
//鼠标移出去，开始滚动
this.element.onmouseout = function() {
//计时器赋值
this.timer = setTimeout(scrollFn, 1000);
}.bind(this);
};
/**
* 原型事件注册
* <strong>滚动事件绑定<strong>
*/
Function.prototype.bind = function(object) {
var method = this;
return function() {
method.apply(object, arguments);
};
};
/**
* <strong>原型事件赋值<strong>
*/
Scroll.prototype = {
/**
* 面板滚动函数
*/
scrollHorizontal : function() {
//水平滚动
console.log("水平滚动");
if (this.element.scrollLeft < this.maxWidth) {
this.element.scrollLeft++;
this.counter++;
} else {
this.element.scrollLeft = 0;
this.counter = 0;
}
if (this.counter < this.width) {
this.timer = setTimeout(this.scrollHorizontal.bind(this), this.speed);
} else {
this.counter = 0;
this.timer = setTimeout(this.scrollHorizontal.bind(this), 3000);
}
},
scrollVertical : function() {
//垂直滚动
console.log("垂直滚动");
if (this.element.scrollTop < this.maxHeight) {
this.element.scrollTop++;
this.counter++;
} else {
this.element.scrollTop = 0;
this.counter = 0;
}
if (this.counter < this.height) {
this.timer = setTimeout(this.scrollVertical.bind(this), this.speed);
} else {
this.counter = 0;
this.timer = setTimeout(this.scrollVertical.bind(this), 3000);
}
},
/**
* 停止面板滚动函数
*/
stop : function() {
clearTimeout(this.timer);
}
};
</span>

实现代码：

<span style="font-family:Microsoft YaHei;font-size:14px;">//初始化滚动
new Scroll({
element : targetId,
direction : 'horizontal',
width : 1128,
scrollNum : 3,
speed : 30
}).scrollHorizontal();
</span>

哈哈，调用的时候只需要指定滚动面板ID,即targetId

用到的属性：

scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

实现原理：

要实现图片列表的无缝滚动，其实就是把要滚动的列表复制成两份滚动，这里记为slider-list1和slider-list2。就如下图所示，蓝色的为可见窗体区域，红色的部分为滚动列表，滚动的内容超过了可见窗体的范围。初始的时候，可见窗体slider-wrap(即可见窗体,也就是父窗体)的scrollLeft的值为0,当它滚动两个第二张图那个位置的时候，slider-list1的左半部分滚动出了可见窗体视线，slider-list2的左半部分滚动到了窗体可见区。这样就实现了滚动列表的无缝隙滚动。

需要切换的位置

注：计时操作用的是setTimeout，而不是setInterval，用setTimeout设计定时器原理这个网上也有挺多讨论的帖子的，大家可以了解到哦! 要在网页卡顿的时候两种方式实现的定时要过特别明显。

 

好啦，博文到此结束，仅供我等菜鸟们学习的，大神可以飘过，哈~

一起学习进步，希望可以多多交流~