自己模仿JQ插件的寫(xiě)法寫(xiě)了一個(gè)循環(huán)滾動(dòng)列表插件，支持自定義上、下、左、右四個(gè)方向，支持平滑滾動(dòng)或者間斷滾動(dòng)兩種方式，都是通過(guò)參數(shù)設(shè)置。JQ里面有些重復(fù)的地方，暫時(shí)沒(méi)想到更好的方法去精簡(jiǎn)。不過(guò)效果還是可以的，如下（效果圖上傳后都加速了，實(shí)際效果比這個(gè)要慢很多）：
html代碼如下：
<!doctype html><html lang="zh-cn"><head><meta charset="utf-8"><title>循環(huán)滾動(dòng)列表</title><link href="css/style.css" rel="stylesheet"/><script src="js/jquery-1.9.1.min.js"></script><script src="js/autoScroll.js"></script><script> $(function(){ //下面是調(diào)用語(yǔ)句，以ID名區(qū)分 $("#autoScroll01").autoScroll({ direction: 'left', //滾動(dòng)方向，'up'、'down'、'left'、'right'，*必須參數(shù) interval: 40, //滾動(dòng)間隔，單位'ms'，一定要大于'滾動(dòng)速度'，*必須參數(shù) speed: 10, //滾動(dòng)完成耗時(shí)，單位'ms'，一定要小于'滾動(dòng)間隔'，*必須參數(shù) distance: 3, //單次滾動(dòng)距離，單位'px'，*必須參數(shù) liWidth: 144, //單個(gè)li的盒模型高度&寬度(包括margin值。左右滾動(dòng)只有l(wèi)iWidth參數(shù)，上下滾動(dòng)只有l(wèi)iHeight參數(shù))，*必須參數(shù) showNum: 6 //顯示幾個(gè)li，父級(jí)高會(huì)自適應(yīng)，但不要超過(guò)最大個(gè)數(shù)，*必須參數(shù) }); $("#autoScroll02").autoScroll({ direction: 'up', interval: 50, //interval、speed、distance都很小時(shí)，就形成了平滑滾動(dòng)現(xiàn)象。 speed: 10, distance: 1, liHeight: 30, showNum: 4 }); $("#autoScroll03").autoScroll({ direction: 'down', //向下滾動(dòng) interval: 2000, //2秒滾動(dòng)一次 speed: 600, //滾動(dòng)耗時(shí)0.6秒（所以必須2秒內(nèi)滾完，以免沒(méi)滾完就執(zhí)行下一次滾動(dòng)了） distance: 40, //一次滾動(dòng)40px liHeight: 40, //單個(gè)的li的盒模型高度是40px（上下滾動(dòng)li沒(méi)有margin跟padding值） showNum: 3 //容器里顯示3個(gè)li標(biāo)簽 }); $("#autoScroll04").autoScroll({ direction: 'right', interval: 2500, //interval、speed、distance都很大時(shí)，就形成了間歇性滾動(dòng)現(xiàn)象。 speed: 800, distance: 288, liWidth: 144, //左右滾動(dòng)時(shí)，liWidth要算上margin值，注意盒模型 showNum: 5 }); });</script></head><body><!-- wrap和boxs box0*這個(gè)div非必需,用于布局而已 --> <div class="wrap"> <!-- 布局必須結(jié)構(gòu)為：外層容器id，里面是 ul 跟 li --> <div class="boxs box01"> <div class="autoBox" id="autoScroll01"> <ul class="clearfix"> <li><a href="#"><img src="images/img01.jpg" alt=""></a></li> <li><a href="#"><img src="images/img02.jpg" alt=""></a></li> <li><a href="#"><img src="images/img03.jpg" alt=""></a></li> <li><a href="#"><img src="images/img04.jpg" alt=""></a></li> <li><a href="#"><img src="images/img05.jpg" alt=""></a></li> <li><a href="#"><img src="images/img06.jpg" alt=""></a></li> <li><a href="#"><img src="images/img07.jpg" alt=""></a></li> <li><a href="#"><img src="images/img08.jpg" alt=""></a></li> <li><a href="#"><img src="images/img09.jpg" alt=""></a></li> <li><a href="#"><img src="images/img10.jpg" alt=""></a></li> </ul> </div> </div> <!--第二個(gè)案例 保持結(jié)構(gòu)不變，id不同就可以復(fù)用多個(gè)--> <div class="boxs box02"> <div class="autoBox" id="autoScroll02"> <ul> <li><a href="#">1. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">2. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">3. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">4. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">5. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">6. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">7. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">8. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> </ul> </div> </div> <div class="boxs box03"> <div class="autoBox" id="autoScroll03"> <ul> <li><a href="#">1. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">2. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">3. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">4. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">5. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">6. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">7. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> <li><a href="#">8. 何日功成名遂了，還鄉(xiāng)，醉笑陪公三萬(wàn)場(chǎng)。不用訴離觴，痛飲從來(lái)別有腸。</a></li> </ul> </div> </div> <div class="clear"></div> <div class="boxs box04"> <div class="autoBox" id="autoScroll04"> <ul class="clearfix"> <li><a href="#"><img src="images/img01.jpg" alt=""></a></li> <li><a href="#"><img src="images/img02.jpg" alt=""></a></li> <li><a href="#"><img src="images/img03.jpg" alt=""></a></li> <li><a href="#"><img src="images/img04.jpg" alt=""></a></li> <li><a href="#"><img src="images/img05.jpg" alt=""></a></li> <li><a href="#"><img src="images/img06.jpg" alt=""></a></li> <li><a href="#"><img src="images/img07.jpg" alt=""></a></li> <li><a href="#"><img src="images/img08.jpg" alt=""></a></li> <li><a href="#"><img src="images/img09.jpg" alt=""></a></li> <li><a href="#"><img src="images/img10.jpg" alt=""></a></li> </ul> </div> </div></div></body></html>css樣式如下：
@charset "utf-8";/* 簡(jiǎn)單reset */body, ul, li { margin: 0; padding: 0;}body { font: 14px/24px Microsoft YaHei; color: #333;}ul { list-style: none; }a { color: #333; outline: none; text-decoration: none;}a:hover { color: #2986dd; }img { border: none; }.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}.clear { display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: "."; overflow: hidden;}.wrap { width: 900px; padding-top: 30px; margin: 0 auto;}.boxs { padding: 15px; margin: 0 auto 30px; background-color: #e4fbff;}.box01 { width: 870px; }.box02 { float: left; width: 400px;}.box03 { float: right; width: 400px;}.box04 { width: 720px; }/* 具體樣式 ---------- *//* 通用必需樣式 */ /* PS：有些重要樣式在js里先寫(xiě)好了，下面id容器、ul和li標(biāo)簽的樣式比較重要 */ .autoBox { position: relative; margin: 0 auto; overflow: hidden;}.autoBox ul { position: absolute; list-style: none; z-index: 2;}/* 第一、四個(gè)列表 */ /* PS：左右滾動(dòng)型列表需要css定義高度，li標(biāo)簽可以有margin值 */#autoScroll01, #autoScroll04 { width: auto; height: 174px;}#autoScroll01 ul li, #autoScroll04 ul li { float: left; width: 128px; height: 168px; padding: 3px; margin: 0 5px; _display: inline;}#autoScroll01 li a, #autoScroll04 li a { display: block; padding: 3px; border: 1px solid #dbdbdb; box-shadow: 0 0 3px rgba(170, 223, 252, 0.5);}#autoScroll01 li a:hover, #autoScroll04 li a:hover { border-color: #71ddff; box-shadow: 0 0 3px rgba(77, 185, 245, .90);}#autoScroll01 li img, #autoScroll04 li img { display: block; width: 120px; height: 160px;}/* 第二、三個(gè)列表 */ /* PS：上下滾動(dòng)型列表需要css定義寬度，li標(biāo)簽盡量不要設(shè)置margin值 */#autoScroll02, #autoScroll03 { width: 100%; height: auto;}#autoScroll02 ul li { height: 30px; line-height: 30px; overflow: hidden;}#autoScroll03 ul li { height: 40px; line-height: 40px; overflow: hidden;}#autoScroll02 li a, #autoScroll03 li a { display: block; width: 100%; height: 24px; line-height: 24px; margin: 3px 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}#autoScroll03 li a { margin: 8px 0; }js代碼如下：
/** * Name : 循環(huán)滾動(dòng)列表 **/ (function(jQuery){ $.fn.autoScroll = function (o) { o = $.extend({ //設(shè)置默認(rèn)參數(shù) direction: 'left', interval: null, speed: null, distance: null, liWidth: null, liHeight: null, showNum: null },o || {}); return this.each(function(){ //回調(diào)開(kāi)始 var $ts = $(this), $ul = $ts.children("ul"), $li = $ul.children("li"), len = $li.length; if (o.direction == 'up' || o.direction == 'down' ){ //根據(jù)類(lèi)型設(shè)置css $ts.css({ "width": "100%", "height": o.showNum * o.liHeight }); $ul.css({ "width": "100%", "height": len * o.liHeight }); $li.css({ "float": "none", "width": "100%", "height": o.liHeight, "margin": 0,"padding": 0 }); }; if (o.direction == 'left' || o.direction == 'right' ){ //其實(shí)也可以在css里寫(xiě)好 $ts.css({ "width": o.showNum * o.liWidth }); $ul.css({ "width": len * o.liWidth }); $li.css({ "float": "left" }); }; switch (o.direction){ //分四種情況，進(jìn)行事件調(diào)用 case 'left': sroLeft(); break; case 'right':sroRight(); break; case 'up': sroUp(); break; case 'down': sroDown(); break; }; function sroLeft(){ //向左滾動(dòng)事件 $ul.css("left", 0); var left; function leftMoving(){ var dis = -o.distance, dif = -o.liWidth * (len - o.showNum); left = parseFloat($ul.css("left")); if (left <= dif){ $ul.css("left",0); left = 0; $ul.delay(o.interval); }; var ltDis = left + dis; if(ltDis <= dif){ ltDis = dif; }; $ul.animate({"left":ltDis+"px"}, o.speed); }; $ul.hover( //鼠標(biāo)移上、移下的阻止與恢復(fù)滾動(dòng) function(){ clearInterval(fnLeft); }, function(){ fnLeft = setInterval(function(){leftMoving()}, o.interval); } ); fnLeft = setInterval(function(){leftMoving()}, o.interval); }; function sroRight(){ //向右滾動(dòng)事件 $ul.css("right", 0); var right; function rightMoving(){ var dis = -o.distance, dif = -o.liWidth * (len - o.showNum); right = parseFloat($ul.css("right")); if (right <= dif){ $ul.css("right",0); right = 0; $ul.delay(o.interval); }; var rtDis = right + dis; if(rtDis <= dif){ rtDis = dif; }; $ul.animate({"right":rtDis+"px"}, o.speed); }; $ul.hover( function(){ clearInterval(fnRight); }, function(){ fnRight = setInterval(function(){rightMoving()}, o.interval); } ); fnRight = setInterval(function(){rightMoving()}, o.interval); }; function sroUp(){ //向上滾動(dòng)事件 $ul.css("top", 0); var top; function upMoving(){ var dis = -o.distance, dif = -o.liHeight * (len - o.showNum); top = parseFloat($ul.css("top")); if (top <= dif){ $ul.css("top",0); top = 0; $ul.delay(o.interval); }; var tpDis = top + dis; if(tpDis <= dif){ tpDis = dif; }; $ul.animate({"top":tpDis+"px"}, o.speed); }; $ul.hover( function(){ clearInterval(fnUp); }, function(){ fnUp = setInterval(function(){upMoving()}, o.interval); } ); fnUp = setInterval(function(){upMoving()}, o.interval); }; function sroDown(){ //向下滾動(dòng)事件 $ul.css("bottom",0); var bottom; function downMoving(){ var dis = -o.distance, dif = -o.liHeight * (len - o.showNum); bottom = parseFloat($ul.css("bottom")); if (bottom <= dif){ $ul.css("bottom",0); bottom = 0; $ul.delay(o.interval); }; var bmDis = bottom + dis; if(bmDis <= dif){ bmDis = dif; }; $ul.animate({"bottom":bmDis+"px"}, o.speed); }; $ul.hover( function(){ clearInterval(fnDown); }, function(){ fnDown = setInterval(function(){downMoving()}, o.interval); } ); fnDown = setInterval(function(){downMoving()}, o.interval); }; }); };})(jQuery);
兼容到IE6+，jq庫(kù)用1.7+的都沒(méi)問(wèn)題 。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
