jquery easyslider 在 12 个图像后出现错误

Question

我正在使用 EasySlider w Jquery，当我在 UL 中添加超过 11 个图像并使用下一个/上一个滑块图像时，它会出现错误并非常快地滑动到第一个图像。

可能是什么原因造成的？在这里看到它 http://eminemforum.net/gallery/

<div id="content">
      <div id="slider">
        <ul>
<li><img src="img/gallery/1.jpg" alt="" /></li>
<li><img src="img/gallery/2.jpg" alt="" /></li>
<li><img src="img/gallery/3.jpg" alt="" /></li>
<li><img src="img/gallery/4.jpg" alt="" /></li>
<li><img src="img/gallery/5.jpg" alt="" /></li>
<li><img src="img/gallery/6.jpg" alt="" /></li>
<li><img src="img/gallery/7.jpg" alt="" /></li>
<li><img src="img/gallery/8.jpg" alt="" /></li>
<li><img src="img/gallery/9.jpg" alt="" /></li>
<li><img src="img/gallery/10.jpg" alt="" /></li>
<li><img src="img/gallery/11.jpg" alt="" /></li>
<li><img src="img/gallery/15.jpg" alt="" /></li>
        </ul>
      </div>
    </div>



(function($) {

$.fn.easySlider = function(options){

    // default configuration properties
    var defaults = {            
        prevId:         'prevBtn',
        prevText:       'Previous',
        nextId:         'nextBtn',  
        nextText:       'Next',
        controlsShow:   true,
        controlsBefore: '',
        controlsAfter:  '', 
        controlsFade:   true,
        firstId:        'firstBtn',
        firstText:      'First',
        firstShow:      false,
        lastId:         'lastBtn',  
        lastText:       'Last',
        lastShow:       false,              
        vertical:       false,
        speed:          800,
        auto:           false,
        pause:          2000,
        continuous:     false, 
        numeric:        false,
        numericId:      'controls'
    }; 

    var options = $.extend(defaults, options);  

    this.each(function() {  
        var obj = $(this);              
        var s = $("li", obj).length;
        var w = $("li", obj).width(); 
        var h = $("li", obj).height(); 
        var clickable = true;
        obj.width(w); 
        obj.height(h); 
        obj.css("overflow","hidden");
        var ts = s-1;
        var t = 0;
        $("ul", obj).css('width',s*w);          

        if(options.continuous){
            $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
            $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
            $("ul", obj).css('width',(s+1)*w);
        };              

        if(!options.vertical) $("li", obj).css('float','left');

        if(options.controlsShow){
            var html = options.controlsBefore;              
            if(options.numeric){
                html += '<ol id="'+ options.numericId +'"></ol>';
            } else {
                if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
                html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
                html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
                if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';              
            };

            html += options.controlsAfter;                      
            $(obj).after(html);                                     
        };

        if(options.numeric){                                    
            for(var i=0;i<s;i++){                       
                $(document.createElement("li"))
                    .attr('id',options.numericId + (i+1))
                    .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
                    .appendTo($("#"+ options.numericId))
                    .click(function(){                          
                        animate($("a",$(this)).attr('rel'),true);
                    });                                                 
            };                          
        } else {
            $("a","#"+options.nextId).click(function(){     
                animate("next",true);
            });
            $("a","#"+options.prevId).click(function(){     
                animate("prev",true);               
            }); 
            $("a","#"+options.firstId).click(function(){        
                animate("first",true);
            });             
            $("a","#"+options.lastId).click(function(){     
                animate("last",true);               
            });             
        };

        function setCurrent(i){
            i = parseInt(i)+1;
            $("li", "#" + options.numericId).removeClass("current");
            $("li#" + options.numericId + i).addClass("current");
        };

        function adjust(){
            if(t>ts) t=0;       
            if(t<0) t=ts;   
            if(!options.vertical) {
                $("ul",obj).css("margin-left",(t*w*-1));
            } else {
                $("ul",obj).css("margin-left",(t*h*-1));
            }
            clickable = true;
            if(options.numeric) setCurrent(t);
        };

        function animate(dir,clicked){
            if (clickable){
                clickable = false;
                var ot = t;             
                switch(dir){
                    case "next":
                        t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;                       
                        break; 
                    case "prev":
                        t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
                        break; 
                    case "first":
                        t = 0;
                        break; 
                    case "last":
                        t = ts;
                        break; 
                    default:
                        t = dir;
                        break; 
                };  
                var diff = Math.abs(ot-t);
                var speed = diff*options.speed;                     
                if(!options.vertical) {
                    p = (t*w*-1);
                    $("ul",obj).animate(
                        { marginLeft: p }, 
                        { queue:false, duration:speed, complete:adjust }
                    );              
                } else {
                    p = (t*h*-1);
                    $("ul",obj).animate(
                        { marginTop: p }, 
                        { queue:false, duration:speed, complete:adjust }
                    );                  
                };

                if(!options.continuous && options.controlsFade){                    
                    if(t==ts){
                        $("a","#"+options.nextId).hide();
                        $("a","#"+options.lastId).hide();
                    } else {
                        $("a","#"+options.nextId).show();
                        $("a","#"+options.lastId).show();                   
                    };
                    if(t==0){
                        $("a","#"+options.prevId).hide();
                        $("a","#"+options.firstId).hide();
                    } else {
                        $("a","#"+options.prevId).show();
                        $("a","#"+options.firstId).show();
                    };                  
                };              

                if(clicked) clearTimeout(timeout);
                if(options.auto && dir=="next" && !clicked){;
                    timeout = setTimeout(function(){
                        animate("next",false);
                    },diff*options.speed+options.pause);
                };

            };

        };
        // init
        var timeout;
        if(options.auto){;
            timeout = setTimeout(function(){
                animate("next",false);
            },options.pause);
        };      

        if(options.numeric) setCurrent(0);

        if(!options.continuous && options.controlsFade){                    
            $("a","#"+options.prevId).hide();
            $("a","#"+options.firstId).hide();              
        };              

    });

};

})(jQuery);

[代码]

    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
    margin:0;
    padding:0;
    display:block;
    overflow:hidden;
    text-indent:-8000px;
    padding-left: 5px;
            }
    /* // image replacement */          
    #content{
    position:relative;
    /* [disabled]padding-bottom: 20px; */
    /* [disabled]background-color: #c8cfd5; */
    border-top: 5px solid #fff;
    border-left: 5px solid #fff;
    border-bottom: 5px solid #fff;
    border-right: 5px solid #fff;
    width: 940px;
    margin: 0 auto;
        }           

/* Easy Slider */

    #slider ul, #slider li,
    #slider2 ul, #slider2 li{
    margin:0;
    padding:0;
    list-style:none;
        }
    #slider2{
    margin-top:1em;
}
    #slider li, #slider2 li{
    /* 
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */ 
    /*width:945px;*/
    width:940px;
    height:510px;
    overflow:hidden;
        }   
    #prevBtn, #nextBtn,
    #slider1next, #slider1prev{
    display:block;
    width:30px;
    height:77px;
    position:absolute;
    left:-40px;
    top:200px;
    z-index:1000;
        }   
    #nextBtn, #slider1next{
    left:940px;
        }                                                       
    #prevBtn a, #nextBtn a,
    #slider1next a, #slider1prev a{
    display:block;
    position:relative;
    width:31px;
    height:77px;
    background:url(img/btn_prev.gif) no-repeat 0 0;
        }   
#shadows {
    height: 98px;
    position: reletive;
    z-index: 1;
    display: block;
    margin: 0px auto;
    bottom:20px;

}
.shadow1 {
    background-image: url(img/gallery_shadow-left.jpg);
    float: left;
    height: 98px;
    width: 130px;
    position:absolute;
    bottom:147px;
    margin-left:-343px;
    z-index:1000;
}
#shadows .shadow2 {
    background-image: url(../img/gallery_shadow-right.jpg);
    display:block;
    width:98x;
    height:130px;
    position:absolute;
    left:-40px;
    top:200px;

}

    #nextBtn a, #slider1next a{ 
        background:url(img/btn_next.gif) no-repeat 0 0; 
        }   

    /* numeric controls */  

    ol#controls{
        margin:1em 0;
        padding:0;
        height:28px;    
        }
    ol#controls li{
        margin:0 10px 0 0; 
        padding:0;
        float:left;
        list-style:none;
        height:28px;
        line-height:28px;
        }
    ol#controls li a{
        float:left;
        height:28px;
        line-height:28px;
        border:1px solid #ccc;
        background:#DAF3F8;
        color:#555;
        padding:0 10px;
        text-decoration:none;
        }
    ol#controls li.current a{
        background:#5DC9E1;
        color:#fff;
        }
    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* // Easy Slider */

Answer 1

看起来这个插件 - 至少，你的副本 - 需要 jQuery 1.3.2（它非常已经过时了）。

http://jsfiddle.net/mattball/pUW5e/

插件万岁，当jQuery 确实如此。

Answer 2

在调查了这个问题之后，我认为问题根本不是 JQuery 版本的问题。我认为该问题是由 margin-left 上的值非常大引起的。在我的 Firefox 中，该问题出现在 10,000 像素标记附近的值处。

因此，您必须修改代码，而不是一直盲目地增加该值。使用不同的方式。

Answer 3

`

<div class="slider-wrapper">
        <ul class="slider clearfix">
            <li class="first">
                <img src="img1.jpg" width="300" height="350" />
            </li>
            <li>
                <img src="img2.jpg" width="400" height="450" />
            </li>
            <li>
                <img src="img3.jpg" width="500" height="550" />
            </li>
            <li>
                <img src="img4.jpg" width="450" height="350" />
            </li>
            <li>
                <img src="img5.jpg" width="350" height="550" />
            </li>
            <li>
                <img src="img3.jpg" width="400" height="350" />
            </li>
            <li>
                <img src="img4.jpg" width="250" height="350" />
            </li>
            <li>
                <img src="img4.jpg" width="250" height="350" />
            </li>
            <li>
                <img src="img4.jpg" width="250" height="350" />
            </li>
            <li>
                <img src="img4.jpg" width="250" height="350" />
            </li>
            <li>
                <img src="img4.jpg" width="250" height="350" />
            </li>
            <li>
                <img src="img4.jpg" width="250" height="350" />
            </li>
            <li class="last">
                <img src="img12.jpg" width="600" height="350" />
            </li>
        </ul>
        <a href="#" title="Prev" class="prev left">Prev</a>
        <a href="#" title="Next" class="nxt right">Next</a>
    </div>`


$(function(){


var cnt = 0;
  var liItems = $('.slider > li');
  var itemLen = liItems.length;



function getMaxLiWidth(){
   var maxWidth = 0;
     $(liItems).each(function(i){
    if(this.offsetWidth > maxWidth)
      maxWidth = this.offsetWidth + 30;
     });
     return maxWidth;
  }



if(itemLen > 1){
   $('.slider-wrapper').css('width', getMaxLiWidth());
  }
  $('.slider').css('width', getMaxLiWidth()*itemLen);
  $(liItems).css('width', getMaxLiWidth());
  var sliderWid = $('.slider > li').outerWidth();

  $('.prev').addClass('disable');

  $('.nxt').click(function(){
   if($(this).hasClass('clicked')){
    return
   }
   $(this).addClass('clicked');
   $('.prev').removeClass('disable');   
    $(this).removeClass('disable');
    cnt++;
    $('.slider').animate({'left': sliderWid * (-cnt)}, 500, function(){
     $('.nxt').removeClass('clicked');
     if( cnt == itemLen -1){
      $('.nxt').addClass('disable');
     }
    });
  });
  $('.prev').click(function(){
   if($(this).hasClass('clicked')){
    return
   }
   $(this).addClass('clicked');
   $('.nxt').removeClass('disable');   
    $(this).removeClass('disable');
    cnt--;
    $('.slider').animate({'left': sliderWid * (-cnt)}, 500, function(){
     $('.prev').removeClass('clicked');
     if( cnt == itemLen-8){
      $('.prev').addClass('disable');
     }
    }); 
  });
 });