2011-11-08 9 views
0

私は男が私のためにjqueryのプラグインを作成していました。基本的には、スライドショー内の5つの異なるスライドショーでした。 1つのことを除いて、うまく動作します。最後のスライドが終了すると、停止します。私はそれを最初のスライドに戻す必要があります。誰かが自分のコードを見て、彼らがそれを理解するのを助けることができるかどうかを見ることができますか?ありがとう。私は、コードを変更することだと思うjQueryアニメーションスライドショーはスライドショープラグイン内にあります。最後のスライドは最初に戻りません

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

答えて

1

テストされていませんが、if(...) { window.startSlider }の部分を変更する必要があるようです。たとえば:

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

そのif文が実行されていない場合は、スライドショーが停止すること表示されます。そうであれば、次のスライドショーに移動します。そのため、スライドショーがなくなるとelseが実行され、最初からやり直してください。

私はそれを間違って読んでいる可能性があります。実際の例がなくてもわかりにくいです(jsfiddleがこれに適しています)。これが助けてくれることを願っています^^^=

0

:以下に$.fn.imgSlider > function auto_animate() > if(direction == 'right'){}が役立つかもしれない:私はよく自分自身を説明している場合

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

を、あなたは今だけのコードにそのelse{}句を追加しています。

+0

これは役に立ちませんでした。 –

+0

これは、最後のスライドショーの最初のスライドに戻るだけです。最初のスライドショーに戻る必要があります。 –

関連する問題