用jQuery编写的无缝滚动插件

设计素描:


HTML代码:
复制代码代码如下所示:
无缝滚动,滚动到右侧










无缝滚动,向左滚动

一千一百一十一亿一千一百一十一万一千一百一十一
二千二百二十二亿二千二百二十二万二千二百二十二
三兆三千三百三十三亿三千三百三十三万三千三百三十三
四兆四千四百四十四亿四千四百四十四万四千四百四十四
五兆五千五百五十五亿五千五百五十五万五千五百五十五
六兆六千六百六十六亿六千六百六十六万六千六百六十六
七兆七千七百七十七亿七千七百七十七万七千七百七十七
八兆八千八百八十八亿八千八百八十八万八千八百八十八
九兆九千九百九十九亿九千九百九十九万九千九百九十九

滚动和无缝滚动

一千一百一十一亿一千一百一十一万一千一百一十一
二千二百二十二亿二千二百二十二万二千二百二十二
三兆三千三百三十三亿三千三百三十三万三千三百三十三
四兆四千四百四十四亿四千四百四十四万四千四百四十四
五兆五千五百五十五亿五千五百五十五万五千五百五十五
六兆六千六百六十六亿六千六百六十六万六千六百六十六
七兆七千七百七十七亿七千七百七十七万七千七百七十七
八兆八千八百八十八亿八千八百八十八万八千八百八十八
九兆九千九百九十九亿九千九百九十九万九千九百九十九

无缝滚动

一千一百一十一亿一千一百一十一万一千一百一十一
二千二百二十二亿二千二百二十二万二千二百二十二
三兆三千三百三十三亿三千三百三十三万三千三百三十三
四兆四千四百四十四亿四千四百四十四万四千四百四十四
五兆五千五百五十五亿五千五百五十五万五千五百五十五
六兆六千六百六十六亿六千六百六十六万六千六百六十六
七兆七千七百七十七亿七千七百七十七万七千七百七十七
八兆八千八百八十八亿八千八百八十八万八千八百八十八
九兆九千九百九十九亿九千九百九十九万九千九百九十九

无缝轧制,非UL,李标签组合,滚动到右边

一千一百一十一亿一千一百一十一万一千一百一十一
二千二百二十二亿二千二百二十二万二千二百二十二
三兆三千三百三十三亿三千三百三十三万三千三百三十三
四兆四千四百四十四亿四千四百四十四万四千四百四十四
五兆五千五百五十五亿五千五百五十五万五千五百五十五
六兆六千六百六十六亿六千六百六十六万六千六百六十六
七兆七千七百七十七亿七千七百七十七万七千七百七十七
八兆八千八百八十八亿八千八百八十八万八千八百八十八
九兆九千九百九十九亿九千九百九十九万九千九百九十九

不要动

一千一百一十一亿一千一百一十一万一千一百一十一
二千二百二十二亿二千二百二十二万二千二百二十二
三兆三千三百三十三亿三千三百三十三万三千三百三十三
四兆四千四百四十四亿四千四百四十四万四千四百四十四
五兆五千五百五十五亿五千五百五十五万五千五百五十五
六兆六千六百六十六亿六千六百六十六万六千六百六十六
七兆七千七百七十七亿七千七百七十七万七千七百七十七
八兆八千八百八十八亿八千八百八十八万八千八百八十八
九兆九千九百九十九亿九千九百九十九万九千九百九十九


CSS代码:
复制代码代码如下所示:
UL,李,H1边缘:0;填充:0;列表样式类型:无;}
UL,div {身高:200px;border: 1px solid红;宽度:300px;填充:30px;};}
李,P {身高:30px;线高度:30px;边距:10px;背景颜色:灰色;颜色:黄色;};}
# guoul1 {宽度:1000px;身高:188px;保证金:0;padding: 0;}
# guoul1李{宽度:300px;身高:188px;保证金:0;padding: 0;margin-left: 10px;}

js插件代码:
复制代码代码如下所示:
({函数);
var默认值= {
目录:左
30 延迟:执行时间
};
美元。fn.gyscontentdisplay =功能(选配){
选择(默认值,扩展名,},选择);

区域全局变量
var obj = $(this); / /当前对象
Obj.css({溢出:隐藏}); / /初始化元素
如果(opt.dir = =无)返回;
var = obj.children(objlis); / /对象的子元素
ObjLis.css({溢出:隐藏});
无功objsize = 0; / /帧大小
无功scrollevent =scrollLeft ; / /滚动方向。
无功litotalsize = 0,litotalsizeother = 0; / /每个锂元素的大小(宽度和高度),克隆的总大小
无功/ scrollsize = 0,滚动条的实际距离
scrollsizemax = 0, / /滚动条的最大距离
scrollsizemin = 0; / /滚动条的最小距离
VaR区间=setInterval ; / /记录

如果(opt.dir = = | | opt.dir = ){ / /。
objsize = obj.innerheight();
scrollevent =scrollTop ;
Obj.css({垫顶:0、垫底:0 })高度(objsize);
}
如果(opt.dir = =左| | opt.dir =右){ / /。
objsize = obj.innerwidth();
scrollevent =scrollLeft ;
Obj.css({填充左:0、填充权:0 })Width(objsize);
}
{其他
警报(您的迪尔参数是错误的);
}

无功getchildtotalsize =功能(DIR)获得李总大小{ / /定义方法
如果(DIR = =左| | dir =右){
ObjLis.css(浮
返回函数(){
objlis.each(函数(){()
litotalsize = $(this)。OuterWidth(真的);
});
}
}
如果(DIR = = | | DIR = ){
ObjLis.css(浮
返回函数(){
objlis.each(函数(){()
litotalsize = $(this)。OuterHeight(真的);
});
}
}
}(选择目录);
(getchildtotalsize); / /让所有李的总规模,在方法的分配

(函数(){())
无功clonecount = math.ceil(objsize×2 / / / litotalsize);分配多少次的子元素
无功clonehtmlnow =clonehtmlstart= obj.html();对原字符串 / /子元素

对于(var i = 0;i < clonecount;i++){
clonehtmlnow = clonehtmlstart;
}
Obj.append(clonehtmlnow);
litotalsizeother =(clonecount + 1)* litotalsize; / /得到补充单元长度
});


如果(opt.dir = =左| | opt.dir =右){
Obj.css({位置:相对
obj.children()(),Css({位置:绝对的
var = 0;
obj.children(),(){()(函数
$(Css)
左= $(this)。OuterWidth(真的);
});
}


滚动条
功能scrollchange(DIR){
如果(DIR = =左| | DIR = ){
scrollevent obj { }(0);
scrollchange =函数(){
scrollsize + +;
如果(scrollsize > = litotalsize)scrollsize = 0;
scrollevent obj { }(scrollsize);
}
}
如果(DIR = =权| | DIR = ){
scrollsizemax = litotalsizeother - objsize;
Obj{scrollEvent} (scrollSizeMax);
ScrollSize = scrollSizeMax;
scrollsizemin = scrollsizemax - litotalsize;
scrollchange =函数(){
scrollsize --;
如果(scrollsize <= scrollsizemin)scrollsize = scrollsizemax;
scrollevent obj { }(scrollsize);
}
}
};
ScrollChange(选择。目录);
区间= setInterval(scrollchange,延迟选择。);
obj.children(),(鼠标悬停
ClearInterval(间隔);
}),(MouseLeave
区间= setInterval(scrollchange,延迟选择。);
});
}
}(jQuery);

插件的调用:
复制代码代码如下所示:
$(函数(){())
$(# guoul1)。GysContentDisplay({导演:右});
$(# guoul2)。GysContentDisplay({导演:左});
$(# guoul3)。GysContentDisplay({导演:});
$(# guoul4)。GysContentDisplay({导演:});
$(# guoul5)。GysContentDisplay({导演:右});
$(# guoul6)。GysContentDisplay({导演:没有});
})