Question

我有一个人为我创建了一个jquery插件。基本上，它是一个幻灯片中的5个不同的幻灯片。除了一件事，它工作正常。一旦最后一张幻灯片完成，它就会停止。我需要它回到第一张幻灯片。有人可以看看他的代码，看看他们是否可以帮助解决它？感谢。

<div id="slides">
                    <div class="slider" id="category0"> 
                        <a class="button prev" href="#" rel="nofollow"><img src="images/slidePrev.png"/></a> 
                        <a class="button next" href="#" rel="nofollow"><img src="images/slideNext.png"/></a> 
                        <div class="holder_cont"> 
                            <ul class="holder"> 
                              <li class="slide first">
                              </li> 
                              <li class="slide"> 
                              </li> 
                              <li class="slide"> 
                              </li> 
                              <li class="slide"> 
                              </li>                         
                            </ul> 
                        </div> 
                        <div class="clear"></div>                            
                   </div> 

<script>
 ;(function($) {
$.preloadImages = function(images, func) {        
    var i = 0;
    var cache = [];
    var loaded = 0;
    var num = images.length;

    for ( ; i < num; i++ ) (function(i) {
        var new_image = $('<img/>').attr('src', images[i]).load(function(){
            loaded++;

            if(loaded == num)
            {                                                
                func();                   
            }
        });                     
        cache.push(new_image);
    })(i);

    return true;
};

$.fn.imgSlider = function(images) {        
    if (!$(this).length || $(this).length>1) {            
        return this;
    }

    var direction = 'right';
    var e = this;
    var timeout_id = 0;
    var in_progress = false
    var i = 0;
    var num_slides = $(e).find('.holder > li').length;
    var slide_widths = $(e).find('.holder > li:first').width();
    var speed = 900;
    var current=0;

    for ( ; i < num_slides; i++ ) (function(i) {            
        $(e).find('.holder > li').eq(i).css('background', 'url('+images[i]+') no-repeat');
    })(i);

    function slider_animate(to)
    {
        clearTimeout(timeout_id);
        timeout_id = setTimeout(auto_animate, 5000);
        in_progress = true;            

        var toMove = $(e).find('.holder');
        current = to;

        $(toMove).animate({'margin-left':'-'+(slide_widths*to)+'px'}, speed, null, function(){                
            in_progress = false;
        });          
    }

    $(e).find('.holder > li').hover(function(){
        clearTimeout(timeout_id);            
        $(this).find('.caption').stop().fadeTo(500, 0.8);            
    },function(){
        $(this).find('.caption').stop().fadeTo(500, 0);            
        timeout_id = setTimeout(auto_animate, 3500);            
    });

    function auto_animate()
    {

        if (current === num_slides-1) {
            var foo = $('.slider:not(.hidden)').attr('id');
            if ( $(e).attr('id') === foo) {
                if ($('#category'+(parseInt(foo.slice(8))+1)).length) {
                    window.startSlider( parseInt(foo.slice(8))+1 );
                }
            }
        }

        if(direction == 'right')
        {
            var to = current+1;
            if(to<num_slides)
            {

                slider_animate(to);
            }
        }
        else
        {
            var to = current-1;
            if(to>=0)
            {
                slider_animate(to);
            }
            else
            {
                var foo = $('.slider:not(.hidden)').attr('id');
                if ( $(e).attr('id') === foo) {
                    if ($('#category'+parseInt(foo.slice(8))+1).length) {
                        window.startSlider( parseInt(foo.slice(8))+1 );
                    }
                }
            }
        }
    }

    $(e).find('.next').live('click', function(){
        if(!in_progress)
        {
            var to = current+1;

            if (current === num_slides-1) {

                var foo = $('.slider:not(.hidden)').attr('id');
                if ( $(e).attr('id') === foo) {
                    var bar = '#category' + (parseInt(foo.slice(8))+1);
                    if ($(bar).length) {
                        window.startSlider( parseInt(foo.slice(8))+1 );
                    }
                }
            }
            if(to<num_slides)
            {
                slider_animate(to);
            }
            else
            {
                slider_animate(0);
            }
        }

        return false;
    });

    $(e).find('.prev').live('click', function(){
        if(!in_progress)
        {
            var to = current-1;

            if (current === num_slides-1) {
                var foo = $('.slider:not(.hidden)').attr('id');
                if ( $(e).attr('id') === foo) {
                    if ($('#category'+parseInt(foo.slice(8))+1).length) {
                        window.startSlider( parseInt(foo.slice(8))+1 );
                    }
                }
            }

            if(to>=0)
            {
                slider_animate(to);
            }
            else
            {
                slider_animate(num_slides-1);

            }
        }

        return false;
    });

    timeout_id = setTimeout(auto_animate, 3000);

    return true;
};
})(jQuery);
</script>

Answer 1

未经测试，但似乎您需要在if(...) { window.startSlider }部分进行更改。例如：

if (...) {
  window.startSlider(...);
} else {
  window.startSlider(0);
}

如果没有执行if语句，您的幻灯片将会停止;如果是，它会移动到下一张幻灯片。因此，当没有更多幻灯片显示时，else应该执行，并从头开始。

我可能读错了;没有一个有效的例子很难说（jsfiddle对此有好处）。希望这有助于= ^。^ =

Answer 2

我认为将$.fn.imgSlider > function auto_animate() > if(direction == 'right'){}中的代码更改为以下内容可能有所帮助：

var to = current+1;
if(to<num_slides){
  slider_animate(to);
}
else{
  slider_animate(0);
}

如果我自己解释得很好，你现在只在代码中添加了else{}子句。

幻灯片插件中的jQuery动画幻灯片。最后一张幻灯片不会回到第一张

2 个答案: