自己写了一个无缝滚动的插件(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 })
