效果图:
html代码:
1 <h1>无缝滚动,向右滚动</h1>
2 <ul id="guoul1">
3 <li><img src="img/f1.jpg" alt="f1"/></li>
4 <li><img src="img/f2.jpg" alt="f2"/></li>
5 <li><img src="img/f3.jpg" alt="f3"/></li>
6 <li><img src="img/f4.jpg" alt="f4"/></li>
7 <li><img src="img/f5.jpg" alt="f5"/></li>
8 <li><img src="img/f6.jpg" alt="f6"/></li>
9 <li><img src="img/f7.jpg" alt="f7"/></li>
10 </ul>
11
12 <h1>无缝滚动,向左滚动</h1>
13 <ul id="guoul2">
14 <li>111111111111</li>
15 <li>222222222222</li>
16 <li>3333333333333</li>
17 <li>4444444444444</li>
18 <li>5555555555555</li>
19 <li>6666666666666</li>
20 <li>7777777777777</li>
21 <li>8888888888888</li>
22 <li>9999999999999</li>
23 </ul>
24 <h1>无缝滚动,向上滚动</h1>
25 <ul id="guoul3">
26 <li>111111111111</li>
27 <li>222222222222</li>
28 <li>3333333333333</li>
29 <li>4444444444444</li>
30 <li>5555555555555</li>
31 <li>6666666666666</li>
32 <li>7777777777777</li>
33 <li>8888888888888</li>
34 <li>9999999999999</li>
35 </ul>
36 <h1>无缝滚动,向下滚动</h1>
37 <ul id="guoul4">
38 <li>111111111111</li>
39 <li>222222222222</li>
40 <li>3333333333333</li>
41 <li>4444444444444</li>
42 <li>5555555555555</li>
43 <li>6666666666666</li>
44 <li>7777777777777</li>
45 <li>8888888888888</li>
46 <li>9999999999999</li>
47 </ul>
48 <h1>无缝滚动,非ul,li标签组合,向右滚动</h1>
49 <div id="guoul5">
50 <p>111111111111</p>
51 <p>222222222222</p>
52 <p>3333333333333</p>
53 <p>4444444444444</p>
54 <p>5555555555555</p>
55 <p>6666666666666</p>
56 <p>7777777777777</p>
57 <p>8888888888888</p>
58 <p>9999999999999</p>
59 </div>
60 <h1>不动</h1>
61 <ul id="guoul6">
62 <li>111111111111</li>
63 <li>222222222222</li>
64 <li>3333333333333</li>
65 <li>4444444444444</li>
66 <li>5555555555555</li>
67 <li>6666666666666</li>
68 <li>7777777777777</li>
69 <li>8888888888888</li>
70 <li>9999999999999</li>
71 </ul>
css代码:
1 ul, li,h1 { margin: 0; padding: 0; list-style-type:none;}
2 ul,div { height: 200px; border: 1px solid red; width: 300px; padding: 30px;margin:10px;list-style-type:none;}
3 li,p { height: 30px; line-height: 30px; margin-top: 10px; background-color: Gray; color: Yellow; margin-left:10px;}
4 #guoul1{ width:1000px; height:188px;margin: 0; padding: 0;}
5 #guoul1 li{ width:300px; height:188px;margin: 0; padding: 0; margin-left:10px;}
js插件代码:
1 ; (function ($) {
2 var defaults = {
3 dir: "left", //none:不动,up:上,right:右,down:下,left:左
4 delay: 30,//执行时间
5 };
6 $.fn.gysContentDisplay = function (opt) {
7 opt = $.extend({}, defaults, opt);
8
9 //全局变量区域
10 var obj = $(this); //当前对象
11 var dirs={left:"left",right:"right",up:"up",down:"down",none:"none"};
12 obj.css({ "overflow": "hidden" }); //初始化元素
13 if (opt.dir === dirs.none) return;
14 var objLis = obj.children(); //对象中的子元素
15 objLis.css({ "overflow": "hidden" });
16 var objSize = 0; //外框尺寸
17 var scrollEvent = "scrollLeft"; //滚动条的滚动方向
18 var liTotalSize = 0, liTotalSizeOther = 0; //每个li元素的尺寸(宽或者高),克隆之后的总尺寸
19 var scrollSize = 0, //滚动条的实际距离
20 scrollSizeMax = 0, //滚动条的最大距离
21 scrollSi* = 0; //滚动条的最小距离
22 var interval = undefined; //记录setInterval
23
24
25 if (opt.dir ===dirs.up || opt.dir ===dirs.down) {//上下
26 objSize = obj.innerHeight();
27 scrollEvent = "scrollTop";
28 obj.css({ "paddingTop": 0, "paddingBottom": 0 }).height(objSize);
29 }
30 else if (opt.dir === dirs.left || opt.dir === dirs.right) {//左右
31 objSize = obj.innerWidth();
32 scrollEvent = "scrollLeft";
33 obj.css({ "paddingLeft": 0, "paddingRight": 0 }).width(objSize);
34 }
35 else {
36 alert("你的dir参数有误");
37 return;
38 }
39
40 var getChildTotalSize = function (dir,dirs,objLis) {// 定义获取li总尺寸的方法
41 if (dir === dirs.left || dir ===dirs.right) {
42 objLis.css("float", "left");
43 return function () {
44 objLis.each(function () {
45 liTotalSize += $(this).outerWidth(true);
46 });
47 }
48 }
49 else if (dir === dirs.up || dir ===dirs.down) {
50 objLis.css("float", "none");
51 return function () {
52 objLis.each(function () {
53 liTotalSize += $(this).outerHeight(true);
54 });
55 }
56 }
57 } (opt.dir,dirs,objLis);
58 getChildTotalSize(); //获得所有的li的总尺寸,在方法中赋值
59
60 (function (obj) {
61 var cloneCount = Math.ceil(objSize * 2 / liTotalSize); //赋值子元素多少遍
62 var cloneHtmlNow = "", cloneHtmlStart = obj.html(); //原始的子元素字符串
63
64 for (var i = 0; i < cloneCount; i++) {
65 cloneHtmlNow += cloneHtmlStart;
66 }
67 obj.append(cloneHtmlNow);
68 liTotalSizeOther = (cloneCount + 1) * liTotalSize; //获取添加了子元素之后的长度
69 })(obj);
70
71
72 if (opt.dir === dirs.left || opt.dir === dirs.right) {
73 obj.css({ "position": "relative", "z-index": 0 });
74 obj.children().css({ "position": "absolute", "z-index": 1 });
75 var left = 0;
76 obj.children().each(function () {
77 $(this).css({ "left": left + "px", "top": 0 });
78 left += $(this).outerWidth(true);
79 });
80 }
81
82
83 //滚动条的滚动方法
84 function scrollChange(dir) {
85 if (dir ===dirs.left || dir === dirs.up) {
86 obj[scrollEvent](0);
87 scrollChange = function () {
88 scrollSize++;
89 if (scrollSize >= liTotalSize) scrollSize = 0;
90 obj[scrollEvent](scrollSize);
91 }
92 }
93 else if (dir === dirs.right|| dir ===dirs.down) {
94 scrollSizeMax = liTotalSizeOther - objSize;
95 obj[scrollEvent](scrollSizeMax);
96 scrollSize = scrollSizeMax;
97 scrollSi* = scrollSizeMax - liTotalSize;
98 scrollChange = function () {
99 scrollSize--;
100 if (scrollSize <= scrollSi*) scrollSize = scrollSizeMax;
101 obj[scrollEvent](scrollSize);
102 }
103 }
104 };
105 scrollChange(opt.dir);
106 interval = setInterval(scrollChange, opt.delay);
107 obj.children().on("mouseover", function () {
108 clearInterval(interval);
109 }).on("mouseleave", function () {
110 interval = setInterval(scrollChange, opt.delay);
111 });
112 }
113 })(jQuery);
插件的调用:
1 $(function () {
2 $("#guoul1").gysContentDisplay({ dir: "right" });
3 $("#guoul2").gysContentDisplay({ dir: "left" });
4 $("#guoul3").gysContentDisplay({ dir: "up" });
5 $("#guoul4").gysContentDisplay({ dir: "down" });
6 $("#guoul5").gysContentDisplay({ dir: "right" });
7 $("#guoul6").gysContentDisplay({ dir: "none" });
8 })