圖片滾動jQuery插件 myScroll

在做產品展示時經常用到，此插件支持兩種形式，一種手段左右滾動，一種自動播放。可控制圖片顯示個數，滾動間隔時間，及動畫時間等。

插件參數：

auto:[false,3000] 這里是個數組，第一個是否自動滾動,第二個是自動滾動間隔時間
visible:4 可顯示圖片的數量
speed:1000 動畫時間，可選slow，fast，數值類
scroll:1 每次切換的個數,此數小于等于visible值

使用方法：

首先保證html結構如下：

<div class="myScroll" id="product0">
<p class="myPrevBtn"></p>

<p class="myNextBtn"></p>
<div class="myBlock">
<ul>
  <li>
  <dl>
    <dt><a href=""><img src="img.jpg" alt="" /></a></dt>

<dd><a href="">圖片滾動插件</a></dd>

</dl>
  </li>
  <li>
  <dl>

<dt><a href=""><img src="img.jpg" alt="" /></a></dt>
<dd><a href="">圖片滾動插件</a></dd>


</dl>
  </li>
  <li>
  <dl>
    <dt><a href=""><img src="img.jpg" alt="" /></a></dt>

<dd><a href="">圖片滾動插件</a></dd>

</dl>
  </li>
</ul>
</div>
</div></pre> 
  
html結構中li里面的形式自己可以根據實際情況修改
 
  
css樣式：
 
  
 *{ margin:0; padding:0}

/-插件樣式/
.myScroll {
    width:100%;
    height:210px;
    overflow:hidden;
    zoom:1;
}
.myScroll p {
    width:22px;
    height:210px;
    background-image:url(icon.gif);
    background-repeat:no-repeat;
    cursor:pointer
}
.myPrevBtn {
    background-position:left center;
    float:left;
    display:inline
}
.myNextBtn {
    background-position:right center;
    float:right;
    display:inline
}
.myBlock {
    overflow:hidden;
    float:left;
    display:inline
}
.myBlock ul {
    width:100%;
    overflow:hidden;
    zoom:1;
    list-style:none
}
.myBlock ul li {
    width:200px;
    float:left;
    padding:10px 0;
    display:inline
}
.myBlock ul li:hover {
    background-color:#FFC
}
.myBlock dl {
    width:160px;
    margin:0 auto;
    list-style:none;
}
.myBlock dl dt {
    width:160px;
    height:160px;
    overflow:hidden;
    background-color:#FFF
}
.myBlock dl dt img {
    width:160px;
}
.myBlock dl dd {
    line-height:18px;
    list-style:none;
    text-align:center
}
.myBlock dl dd a {
    display:inline-block;
    padding:3px 0;
    width:100%;
}
.myClone {
    overflow:hidden;
    zoom:1
}
.myClone ul {
    float:left;
    display:inline
}</pre> 
  
調用插件：
 
  
//手動滾動
$("#product0").myScroll({
            visible:3,
        scroll:2,
        speed:1000
        });

//自動滾動
$("#product").myScroll({
               visible:4,
               scroll:3,
               auto:[true,2000],
               speed:1000
});</pre> 
  
瀏覽DEMO>>
 
  
源代碼：
 
  
 (function($)
{
  $.fn.myScroll = function(options)
  {


//默認配置
var defaults = {
  auto: [false, 3000],
  //是否自動滾動,第二個參數是自動滾動是切換的間隔時間
  visible: 4,
  //可顯示的數量
  speed: 1000,
  //動畫時間，可選slow，fast，數值類
  scroll: 1 //每次切換的個數,此數小于等于visible值
};

var opts = $.extend(
{}, defaults, options);
opts.scroll = opts.scroll > opts.visible ? opts.visible : opts.scroll;

this.each(function(i)
{

  var prevBtn = $(this).find("p.myPrevBtn"),
      nextBtn = $(this).find("p.myNextBtn"),
      block = $(this).find("div.myBlock"),
      innerBlock = block.find("ul"),
      list = block.find('ul>li'),
      listNum = list.size(),
      listWidth = list.width(),
      blockWidth = listWidth * opts.visible,
      ntervalId;

  //設置寬度樣式
$(this).width(blockWidth + prevBtn.width() + nextBtn.width());
  block.width(blockWidth).find("ul").width(listWidth * listNum);

  //獲取已滾動個數

  function getSnum()
  {
    return (parseInt(innerBlock.css("margin-left")) * -1) / listWidth;
  }

  //獲取滾動的距離

  function getMove(c)
  {
    return c >= opts.scroll ? opts.scroll * listWidth : c * listWidth;
  }

  //單擊向前按鈕
  prevBtn.click(function()
  {
    var snum = getSnum(),
        c = listNum - snum - opts.visible,
        m = getMove(c);

    if (listNum - snum > opts.visible)
    {
      innerBlock.animate(
      {
        "margin-left": "-=" + m
      }, opts.speed);
    }
  });

  //單擊向后按鈕
  nextBtn.click(function()
  {
    var snum = getSnum(),
        m = getMove(snum);

    if (snum > 0)
    {
      innerBlock.animate(
      {
        "margin-left": "+=" + m
      }, opts.speed);
    }
  });

  //如果自動滾動
  if (opts.auto[0])
  {

    $(this).width(blockWidth);
    prevBtn.hide();
    nextBtn.hide();

    function auto()
    {
      var snum = getSnum(),
          m = getMove(listNum - snum - opts.visible);

      if (listNum - snum > opts.visible)
      {
        innerBlock.animate(
        {
          "margin-left": "-=" + m
        }, opts.speed);
      }
      else
      {
        innerBlock.css("margin-left", 0).find('li').slice(0, listNum - opts.visible).appendTo(innerBlock);
      }
    }

    //當鼠標經過滾動區域停止滾動
block.hover(function()
    {
      clearInterval(intervalId);
    }, function()
    {
      intervalId = setInterval(auto, opts.auto[1] + Math.abs(opts.speed - opts.auto[1]) + 100);
    }).trigger('mouseleave');

  }

});


};
})(jQuery);</pre> 
  
 
    
    
    
  
 
  

    轉載請注明： 
   muzilei » 
   圖片滾動插件myScroll