jquery 图片横向滚动插件

使用jquery做的，图片横向左右滚动，和自动滚动的插件，可以自定义显示图片个数和滚动时间

 

1、插件源代码

(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);

 

2、html结构

/*---------------------------------------------------

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>

3、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

}

4、插件调用方法

//手动滚动

$("#product0").myScroll({

       visible:3,

scroll:2,

speed:1000

});

 

 

//自动滚动

$("#product").myScroll({

               visible:4,

               scroll:3,

               auto:[true,2000],

               speed:1000

});

 

5、效果图