自己写了一个无缝滚动的插件(jQuery)

效果图:

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                     scrollSizeMin = 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                         scrollSizeMin = scrollSizeMax - liTotalSize;
 98                         scrollChange = function () {
 99                             scrollSize--;
100                             if (scrollSize <= scrollSizeMin) 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         })