效果图:
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 })