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

 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>111111111111li>
15         li>222222222222li>
16         li>3333333333333li>
17         li>4444444444444li>
18         li>5555555555555li>
19         li>6666666666666li>
20         li>7777777777777li>
21         li>8888888888888li>
22         li>9999999999999li>
23     ul>
24      h1>无缝滚动,向上滚动h1>
25      ul id="guoul3">
26         li>111111111111li>
27         li>222222222222li>
28         li>3333333333333li>
29         li>4444444444444li>
30         li>5555555555555li>
31         li>6666666666666li>
32         li>7777777777777li>
33         li>8888888888888li>
34         li>9999999999999li>
35     ul>
36      h1>无缝滚动,向下滚动h1>
37     ul id="guoul4">
38         li>111111111111li>
39         li>222222222222li>
40         li>3333333333333li>
41         li>4444444444444li>
42         li>5555555555555li>
43         li>6666666666666li>
44         li>7777777777777li>
45         li>8888888888888li>
46         li>9999999999999li>
47     ul>
48     h1>无缝滚动,非ul,li标签组合,向右滚动h1>
49 div id="guoul5">
50         p>111111111111p>
51         p>222222222222p>
52         p>3333333333333p>
53         p>4444444444444p>
54         p>5555555555555p>
55         p>6666666666666p>
56         p>7777777777777p>
57         p>8888888888888p>
58         p>9999999999999p>
59     div>
60  h1>不动h1>
61     ul id="guoul6">
62         li>111111111111li>
63         li>222222222222li>
64         li>3333333333333li>
65         li>4444444444444li>
66         li>5555555555555li>
67         li>6666666666666li>
68         li>7777777777777li>
69         li>8888888888888li>
70         li>9999999999999li>
71     ul>

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;}

  1 ; (function ($) {
  2             var defaults = {
  3                 dir: "left", //none:不动,up:上,right:右,down:下,right:左
  4                 delay: 30,//执行时间
  5             };
  6             $.fn.gysContentDisplay = function (opt) {
  7                 opt = $.extend({}, defaults, opt);
  8 
  9                 //全局变量区域
 10                 var obj = $(this); //当前对象
 11                 obj.css({ "overflow": "hidden" }); //初始化元素
 12                 if (opt.dir == "none") return;
 13                 var objLis = obj.children(); //对象中的子元素
 14                 objLis.css({ "overflow": "hidden" });
 15                 var objSize = 0; //外框尺寸
 16                 var scrollEvent = "scrollLeft"; //滚动条的滚动方向
 17                 var liTotalSize = 0, liTotalSizeOther = 0; //每个li元素的尺寸(宽或者高),克隆之后的总尺寸
 18                 var scrollSize = 0, //滚动条的实际距离
 19                     scrollSizeMax = 0, //滚动条的最大距离
 20                     scrollSizeMin = 0; //滚动条的最小距离
 21                 var interval = ""; //记录setInterval
 22 
 23                 if (opt.dir == "up" || opt.dir == "down") {//上下
 24                     objSize = obj.innerHeight();
 25                     scrollEvent = "scrollTop";
 26                     obj.css({ "padding-top": 0, "padding-bottom": 0 }).height(objSize);
 27                 }
 28                 else if (opt.dir == "left" || opt.dir == "right") {//左右
 29                     objSize = obj.innerWidth();
 30                     scrollEvent = "scrollLeft";
 31                     obj.css({ "padding-left": 0, "padding-right": 0 }).width(objSize);
 32                 }                
 33                 else {
 34                     alert("你的dir参数有误");
 35                 }
 36 
 37                 var getChildTotalSize = function (dir) {// 定义获取li总尺寸的方法     
 38                     if (dir == "left" || dir == "right") {
 39                         objLis.css("float", "left");
 40                         return function () {
 41                             objLis.each(function () {
 42                                 liTotalSize += $(this).outerWidth(true);
 43                             });
 44                         }
 45                     }
 46                     else if (dir == "up" || dir == "down") {
 47                         objLis.css("float", "none");
 48                         return function () {
 49                             objLis.each(function () {
 50                                 liTotalSize += $(this).outerHeight(true);
 51                             });
 52                         }
 53                     }
 54                 } (opt.dir);
 55                 getChildTotalSize(); //获得所有的li的总尺寸,在方法中赋值
 56 
 57                 (function () {
 58                     var cloneCount = Math.ceil(objSize * 2 / liTotalSize); //赋值子元素多少遍
 59                     var cloneHtmlNow = "", cloneHtmlStart = obj.html(); //原始的子元素字符串
 60 
 61                     for (var i = 0; i ) {
 62                         cloneHtmlNow += cloneHtmlStart;
 63                     }
 64                     obj.append(cloneHtmlNow);
 65                     liTotalSizeOther = (cloneCount + 1) * liTotalSize; //获取添加了子元素之后的长度
 66                 })();
 67 
 68 
 69                 if (opt.dir == "left" || opt.dir == "right") {
 70                     obj.css({ "position": "relative", "z-index": 0 });
 71                     obj.children().css({ "position": "absolute", "z-index": 1 });
 72                     var left = 0;
 73                     obj.children().each(function () {
 74                         $(this).css({ "left": left + "px", "top": 0 });
 75                         left += $(this).outerWidth(true);
 76                     });
 77                 }
 78 
 79 
 80                 //滚动条的滚动方法
 81                 function scrollChange(dir) {
 82                     if (dir == "left" || dir == "up") {
 83                         obj[scrollEvent](0);
 84                         scrollChange = function () {
 85                             scrollSize++;
 86                             if (scrollSize >= liTotalSize) scrollSize = 0;
 87                             obj[scrollEvent](scrollSize);
 88                         }
 89                     }
 90                     else if (dir == "right" || dir == "down") {
 91                         scrollSizeMax = liTotalSizeOther - objSize;
 92                         obj[scrollEvent](scrollSizeMax);
 93                         scrollSize = scrollSizeMax;
 94                         scrollSizeMin = scrollSizeMax - liTotalSize;
 95                         scrollChange = function () {
 96                             scrollSize--;
 97                             if (scrollSize  scrollSizeMax;
 98                             obj[scrollEvent](scrollSize);
 99                         }
100                     }
101                 };
102                 scrollChange(opt.dir);
103                 interval = setInterval(scrollChange, opt.delay);
104                 obj.children().on("mouseover", function () {
105                     clearInterval(interval);
106                 }).on("mouseleave", function () {
107                     interval = setInterval(scrollChange, opt.delay);
108                 });
109             }
110         })(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         })