自己写了一个无缝滚动的插件(jQuery)
时间：2014-05-01 00:37:44
收藏：0
阅读：530
效果图:
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:下,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 < cloneCount; 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 <= scrollSizeMin) 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 })
评论（0）