1     <h1>无缝滚动,向右滚动</h1> 2     <ul id="guoul1"> 3         <li><img src="http://www.mamicode.com/img/f1.jpg"  alt="f1"/></li> 4         <li><img src="http://www.mamicode.com/img/f2.jpg" alt="f2"/></li> 5         <li><img src="http://www.mamicode.com/img/f3.jpg" alt="f3"/></li> 6         <li><img src="http://www.mamicode.com/img/f4.jpg" alt="f4"/></li>  7          <li><img src="http://www.mamicode.com/img/f5.jpg" alt="f5"/></li> 8         <li><img src="http://www.mamicode.com/img/f6.jpg" alt="f6"/></li> 9         <li><img src="http://www.mamicode.com/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>

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:下,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         })