html代码:
代码如下:
无缝滚动,向右滚动
无缝滚动,向左滚动
- 111111111111
- 222222222222
- 3333333333333
- 4444444444444
- 5555555555555
- 6666666666666
- 7777777777777
- 8888888888888
- 9999999999999
无缝滚动,向上滚动
- 111111111111
- 222222222222
- 3333333333333
- 4444444444444
- 5555555555555
- 6666666666666
- 7777777777777
- 8888888888888
- 9999999999999
无缝滚动,向下滚动
- 111111111111
- 222222222222
- 3333333333333
- 4444444444444
- 5555555555555
- 6666666666666
- 7777777777777
- 8888888888888
- 9999999999999
无缝滚动,非ul,li标签组合,向右滚动
111111111111
222222222222
3333333333333
4444444444444
5555555555555
6666666666666
7777777777777
8888888888888
9999999999999
不动
- 111111111111
- 222222222222
- 3333333333333
- 4444444444444
- 5555555555555
- 6666666666666
- 7777777777777
- 8888888888888
- 9999999999999
css代码:
代码如下:
ul, li,h1 { margin: 0; padding: 0; list-style-type:none;}
ul,div { height: 200px; border: 1px solid red; width: 300px; padding: 30px;margin:10px;list-style-type:none;}
li,p { height: 30px; line-height: 30px; margin-top: 10px; background-color: gray; color: yellow; margin-left:10px;}
#guoul1{ width:1000px; height:188px;margin: 0; padding: 0;}
#guoul1 li{ width:300px; height:188px;margin: 0; padding: 0; margin-left:10px;}
js插件代码:
代码如下:
; (function ($) {
var defaults = {
dir: left, //none:不动,up:上,right:右,down:下,right:左
delay: 30,//执行时间
};
$.fn.gyscontentdisplay = function (opt) {
opt = $.extend({}, defaults, opt);
//全局变量区域
var obj = $(this); //当前对象
obj.css({ overflow: hidden }); //初始化元素
if (opt.dir == none) return;
var objlis = obj.children(); //对象中地子元素
objlis.css({ overflow: hidden });
var objsize = 0; //外框尺寸
var scrollevent = scrollleft; //滚动条地滚动方向
var litotalsize = 0, litotalsizeother = 0; //每个li元素地尺寸(宽或者高),克隆之后地总尺寸
var scrollsize = 0, //滚动条地实际距离
scrollsizemax = 0, //滚动条地最大距离
scrollsizemin = 0; //滚动条地最小距离
var interval = ; //记录setinterval
if (opt.dir == up || opt.dir == down) {//上下
objsize = obj.innerheight();
scrollevent = scrolltop;
obj.css({ padding-top: 0, padding-bottom: 0 }).height(objsize);
}
else if (opt.dir == left || opt.dir == right) {//左右
objsize = obj.innerwidth();
scrollevent = scrollleft;
obj.css({ padding-left: 0, padding-right: 0 }).width(objsize);
}
else {
alert(你地dir参数有误);
}
var getchildtotalsize = function (dir) {// 定义获取li总尺寸地方法
if (dir == left || dir == right) {
objlis.css(float, left);
return function () {
objlis.each(function () {
litotalsize += $(this).outerwidth(true);
});
}
}
else if (dir == up || dir == down) {
objlis.css(float, none);
return function () {
objlis.each(function () {
litotalsize += $(this).outerheight(true);
});
}
}
} (opt.dir);
getchildtotalsize(); //获的所有地li地总尺寸,在方法中赋值
(function () {
var clonecount = math.ceil(objsize * 2 / litotalsize); //赋值子元素多少遍
var clonehtmlnow = , clonehtmlstart = obj.html(); //原始地子元素字符串
for (var i = 0; i < clonecount; i++) {
clonehtmlnow += clonehtmlstart;
}
obj.append(clonehtmlnow);
litotalsizeother = (clonecount + 1) * litotalsize; //获取添加了子元素之后地长度
})();
if (opt.dir == left || opt.dir == right) {
obj.css({ position: relative, z-index: 0 });
obj.children().css({ position: absolute, z-index: 1 });
var left = 0;
obj.children().each(function () {
$(this).css({ left: left + px, top: 0 });
left += $(this).outerwidth(true);
});
}
//滚动条地滚动方法
function scrollchange(dir) {
if (dir == left || dir == up) {
obj[scrollevent](0);
scrollchange = function () {
scrollsize++;
if (scrollsize >= litotalsize) scrollsize = 0;
obj[scrollevent](scrollsize);
}
}
else if (dir == right || dir == down) {
scrollsizemax = litotalsizeother - objsize;
obj[scrollevent](scrollsizemax);
scrollsize = scrollsizemax;
scrollsizemin = scrollsizemax - litotalsize;
scrollchange = function () {
scrollsize--;
if (scrollsize <= scrollsizemin) scrollsize = scrollsizemax;
obj[scrollevent](scrollsize);
}
}
};
scrollchange(opt.dir);
interval = setinterval(scrollchange, opt.delay);
obj.children().on(mouseover, function () {
clearinterval(interval);
}).on(mouseleave, function () {
interval = setinterval(scrollchange, opt.delay);
});
}
})(jquery);
插件地调用:
代码如下:
$(function () {
$(#guoul1).gyscontentdisplay({ dir: right });
$(#guoul2).gyscontentdisplay({ dir: left });
$(#guoul3).gyscontentdisplay({ dir: up });
$(#guoul4).gyscontentdisplay({ dir: down });
$(#guoul5).gyscontentdisplay({ dir: right });
$(#guoul6).gyscontentdisplay({ dir: none });
})
更多信息请查看IT技术专栏