jquery 图片横向滚动的插件代码

(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)
    { // www.jb200.com
      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);

/*--------------------
html结构代码
li中的结构可以根据需要修改
---------------------------*/
<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>

*{ 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
}

//手动滚动
$("#product0").myScroll({
         visible:3,
  scroll:2,
  speed:1000
  });
//自动滚动
$("#product").myScroll({
               visible:4,
               scroll:3,
               auto:[true,2000],
               speed:1000
});