jQuery控制li上下循環(huán)滾動(dòng)插件用法實(shí)例(附demo源碼下載)

更新時(shí)間：2016年05月28日 10:14:09 作者：keyunq

這篇文章主要介紹了jQuery控制li上下循環(huán)滾動(dòng)插件用法,結(jié)合實(shí)例形式分析了jQuery循環(huán)滾動(dòng)插件的實(shí)現(xiàn)技巧與使用方法,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了jQuery控制li上下循環(huán)滾動(dòng)插件用法。分享給大家供大家參考，具體如下：

/**
 *
 * jQuery scrollQ plugin li上下滾動(dòng)插件
 * @name jquery-scrollQ.js
 * @author Q
 * @date 2012-03-23
 * line 顯示li行數(shù)
 * scrollNum 每次滾動(dòng)li行數(shù)
 * scrollTime 滾動(dòng)速度 單位毫秒
 *
 */
(function($){
  var status = false;
  $.fn.scrollQ = function(options){
    var defaults = {
      line:4,
      scrollNum:2,
      scrollTime:1000
    }
    var options=jQuery.extend(defaults,options);
    var _self = this;
    return this.each(function(){
      $("li",this).each(function(){
        $(this).css("display","none");
      })
      $("li:lt("+options.line+")",this).each(function(){
        $(this).css("display","block");
      })
      function scroll() {
        for(i=0;i<options.scrollNum;i++) {
          var start=$("li:first",_self);
          start.fadeOut(100);
          start.css("display","none");
          start.appendTo(_self);
          $("li:eq("+(options.line-1)+")",_self).each(function(){
            $(this).fadeIn(500);
            $(this).css("display","block");
          })
        }
      }
      var timer;
      timer = setInterval(scroll,options.scrollTime);
      _self.bind("mouseover",function(){
        clearInterval(timer);
      });
      _self.bind("mouseout",function(){
        timer = setInterval(scroll,options.scrollTime);
      });
    });
  }
})(jQuery);

調(diào)用方式如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>test</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="scrollQ.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#sItem").scrollQ();
});
</script>
</head>
  <body>
  <div>
  <ul id="sItem">
  <li>標(biāo)題1</li>
  <li>標(biāo)題2</li>
  <li>標(biāo)題3</li>
  <li>標(biāo)題4</li>
  <li>標(biāo)題5</li>
  <li>標(biāo)題6</li>
  <li>標(biāo)題7</li>
  <li>標(biāo)題8</li>
  <li>標(biāo)題9</li>
  <li>標(biāo)題10</li>
  </ul>
  </div>
</body>
</html>

完整實(shí)例代碼點(diǎn)擊此處本站下載。

PS：這里再為大家推薦幾款代碼格式化、美化工具，相信大家在以后的開發(fā)過程中會(huì)用得到：

在線JavaScript代碼美化、格式化工具：
http://tools.jb51.net/code/js

JavaScript壓縮/格式化/加密工具：
http://tools.jb51.net/code/jscompress

PHP代碼在線格式化美化工具：
http://tools.jb51.net/code/phpformat

XML代碼在線格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具：
http://tools.jb51.net/code/json

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: