图片滚动jQuery插件 myScroll

     <img title="图片滚动jQuery插件 myScroll" border="0" alt="图片滚动jQuery插件 myScroll" src="https://simg.open-open.com/show/7f888e1376ab7ac34b06f3dde8f18659.png" width="625" height="422" />    <p></p>    <p>在做产品展示时经常用到，此插件支持两种形式，一种手段左右滚动，一种自动播放。可控制图片显示个数，滚动间隔时间，及动画时间等。</p>    <p><strong>插件参数：</strong></p>    <p>auto:[false,3000] 这里是个数组，第一个是否自动滚动,第二个是自动滚动间隔时间<br /> visible:4 可显示图片的数量<br /> speed:1000 动画时间，可选slow，fast，数值类<br /> scroll:1 每次切换的个数,此数小于等于visible值</p>    <p><strong>使用方法：</strong></p>    <p>首先保证html结构如下：</p>    <pre class="brush: xml; title: ; notranslate" title=""><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>    <p><strong>html结构中li里面的形式自己可以根据实际情况修改</strong></p>    <p><strong>css样式：</strong></p>    <pre class="brush: css; title: ; notranslate" title=""> *{ 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>    <p><strong>调用插件：</strong></p>    <pre class="brush: jscript; title: ; notranslate" title="">//手动滚动 $("#product0").myScroll({          visible:3,   scroll:2,   speed:1000   });  //自动滚动 $("#product").myScroll({                visible:4,                scroll:3,                auto:[true,2000],                speed:1000 });</pre>    <p><a href="/misc/goto?guid=4959500606378088263" target="_blank"><strong>浏览DEMO>></strong></a></p>    <p><strong>源代码：</strong></p>    <pre class="brush: jscript; title: ; notranslate" title=""> (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>    <div class="wumii-hook">     <input value="http://www.muzilei.com/archives/185" type="hidden" name="wurl" />     <input value="图片滚动插件myScroll" type="hidden" name="wtitle" />     <input type="hidden" name="wpic" />    </div>    <div>     转载请注明：     <a href="/misc/goto?guid=4959500606478247482">muzilei</a> »     <a href="/misc/goto?guid=4959500606557656995">图片滚动插件myScroll </a>    </div>