图片无缝滚动工具类
CreateTime--2018年3月7日17:11:03
Author:Marydon
/**
* 图片无缝滚动
* @description
* 将要滚动的图片复制一份作为它的兄弟节点拼接到其身后，
* 通过操作scrollTop和scrollLeft来调节滚动条的距离来实现
*/
function Marquee() {
var object = this;
var container_father;
var container_child;
var container_clone;
var scrolllDirection;
var scrollSpeed;
/**
* 界面滚动参数设置
* @param direction
* 滚动方向-没有传参，默认向右滚动
* @param speed
* 滚动速度-没有传参，速度为50毫秒
* @param id_father
* 父（祖父）容器id
* @param id_child
* 子（子孙）容器id
*/
this.init = function(direction, speed, id_father, id_child) {
// 定义克隆容器id
id_clone = "cloneContainer";
// 对子容器进行克隆并拼接到它的后面
$('#' + id_child).clone().attr("id", id_clone).appendTo($('#' + id_child).parent());
container_father = document.getElementById(id_father);
container_child = document.getElementById(id_child);
container_clone = document.getElementById(id_clone);
// 滚动方向
scrolllDirection = direction || "right";
// 滚动速度
scrollSpeed = speed || 50;
// 选择滚动方向
switch (scrolllDirection) {
case 'up':
object.MarqueeToTop();
break;
case 'down':
object.MarqueeToDown();
break;
case 'left':
object.MarqueeToLeft();
break;
case 'right':
object.MarqueeToRight();
break;
default:
//object.MarqueeToRight();
break;
}
};
/**
* 向上滚动
*/
this.MarqueeToTop = function () {
var MyMarTop = setInterval(MarqueeTop, scrollSpeed);
container_father.onmouseover = function() {
clearInterval(MyMarTop);
}
container_father.onmouseout = function() {
MyMarTop = setInterval(MarqueeTop, scrollSpeed);
}
function MarqueeTop() {
if (container_father.scrollTop == container_clone.offsetHeight) {
container_father.scrollTop = 0;
} else {
container_father.scrollTop++;
}
}
};
/**
* 向下滚动（倒序播放）
*/
this.MarqueeToDown = function () {
var MyMarDown = setInterval(MarqueeDown, scrollSpeed);
container_father.onmouseover = function() {
clearInterval(MyMarDown);
}
container_father.onmouseout = function() {
MyMarDown = setInterval(MarqueeDown, scrollSpeed);
}
function MarqueeDown() {
if (container_father.scrollTop == 0) {
container_father.scrollTop = container_clone.offsetHeight;
} else {
container_father.scrollTop--;
}
}
};
/**
* 向左滚动
* @description
* 展现在父容器内的是子容器中的图片，然后从第一张图片开始往左滚动（正序播放）
* @achieve
* 通过从左侧滚动过的像素数的递增（0-maxWidth），来实现图片向左移动
*/
this.MarqueeToLeft = function () {
var MyMarLeft = setInterval(MarqueeLeft, scrollSpeed);
container_father.onmouseover = function() {
clearInterval(MyMarLeft);
}
container_father.onmouseout = function() {
MyMarLeft = setInterval(MarqueeLeft, scrollSpeed);
}
function MarqueeLeft() {
// 滚动条向右滚动到最大值
//debugger;
if (container_father.scrollLeft == container_clone.offsetWidth) {
container_father.scrollLeft = 0;
} else {
// 滚动条向右移动，图片往左移动
container_father.scrollLeft++;
}
}
};
/**
* 向右滚动
* @description
展现在父容器内的是克隆容器中的图片，然后图片开始往右滚动（倒序播放）
* @achieve
* 通过从左侧滚动过的像素数的递减（maxWidth-0），来实现图片向右移动
*/
this.MarqueeToRight = function() {
var MyMarRight = setInterval(MarqueeRight, scrollSpeed);
// 鼠标悬浮
container_father.onmouseover = function() {
clearInterval(MyMarRight);
}
// 鼠标移出
container_father.onmouseout = function() {
MyMarRight = setInterval(MarqueeRight, scrollSpeed);
}
/**
* 右滚动
*/
function MarqueeRight() {
// scrollLeft不会取到负值
if (container_father.scrollLeft == 0) {
container_father.scrollLeft = container_clone.offsetWidth;
} else {
// 滚动条往左移动，图片向右移动
container_father.scrollLeft--;
}
}
};
}
总结：
1.只有scrollLeft和scrollTop，没有scrollRight和scrollDown；
2.scrollLeft和scrollTop有最小值（0）和最大值，最小值改不成负数，最大值达到最大后无法再增；
3.上滚动和左滚动，是正序滚动；下滚动和有滚动，是倒序滚动；
4.无缝滚动实现条件约束，必须遵循：
水平滚动时，父容器的宽度必须<=子容器所有照片的实际宽度之和；
因为scrollLeft的最大值<offsetWidth，会造成以下状况：
左滚动时，当滚动到克隆容器的最后一张照片时，scrollLeft达到最大值，因为不满足if(scrollLeft==offsetWidth)的条件，并且scrollLeft++也无效化，
所以不再滚动；
右滚动时，当滚动到子容器的第一张照片（srollLeft=0）时，重置scrollLeft=offsetWidth，两者所在的点，即父容器所展示的图片不是完全一模一样的图片，
所以给人以不连续的感觉。
垂直滚动时，父容器的高度必须<=子容器所有照片的实际高度之和。
因为scrollTop的最大值<offsetHeight，会造成以下状况：
上滚动时，当滚动到克隆容器的最后一张照片时，scrollTop达到最大值，因为不满足if(scrollTop==offsetHeight)的条件，并且scrollTop++也无效化，
所以不再滚动；
下滚动时，当滚动到子容器的第一张照片（scrollTop=0）时，重置scrollTop=offsetHeight，两者所在的点，即父容器所展示的图片不是完全一模一样的图片，
所以给人以不连续的感觉。
注：想通过padding撑大照片的容器的方法无效。
范例：请移步至下面的推荐文章
作者：Marydon