我怎樣才能使這個淡入淡出成爲幻燈片？

我有以下代碼，可以在不同幻燈片之間自動幻燈片顯示，如圖所示。我怎樣才能使這個淡入淡出成爲幻燈片？

現在，當我點擊圖片上顯示的數字時，現在會產生一個淡入淡出，但是我想在1到5之間自動進行轉換，而當5再次以定時方式返回到1時。

的截圖：

alt text

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/JavaScript"> 
$(document).ready(function(){ 
    $('#button a').click(function(){ 
     var integer = $(this).attr('rel'); 
     $('#myslide .cover').css({left:-960*(parseInt(integer)-1)}).hide().fadeIn(); 
     $('#button a').each(function(){ 
     $(this).removeClass('active'); 
      if($(this).hasClass('button'+integer)){ 
       $(this).addClass('active')} 
     }); 
    });  
}); 
</script>

來源

2010-09-21 Cy.

我想是不是添加您的屏幕快照將使用回調函數。 – svk 2010-09-21 11:26:03

請問我們可以看到幻燈片html佈局！ – RobertPitt 2010-09-21 11:27:09

以下假定您將刪除的數字按鈕，你的幻燈片編號爲1至5

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/JavaScript"> 
$(document).ready(function(){ 
    function showSlide(integer) { 
     $('#myslide .cover').css({left:-960*(integer-1)}).hide().fadeIn(); 
     $('#button a').each(function(){ 
     $(this).removeClass('active'); 
      if($(this).hasClass('button'+integer)){ 
       $(this).addClass('active')} 
     }); 
     setTimeout(function() {showSlide((integer % 5) + 1);}, 5000); 
    } 
    showSlide(1); 
}); 
</script>

來源

2010-09-21 11:29:16 sje397

謝謝sje397，這個解決方案完美工作，除了使按鈕的使用無效。每當我點擊按鈕時，點擊被忽略......我怎麼能使兩個都可以工作？ – 2010-09-21 11:40:15

@Cy - 保存'setTimeout'調用的返回值 - 您可以將其傳遞給'clearTimeout'來停止定時器。添加一個點擊處理程序，1）停止所描述的順序，2）用適當的值n調用showSlide（n），再次在所選索引處開始順序 – sje397 2010-09-21 11:54:40

驚人的@ sje397這是完美和整潔的解決方案！ – 2010-09-21 11:58:59

嗯嘗試一些沿線

$(document).ready(function(){ 
    Slider = { 
     current : 1; 
     Init : function(after_user_click) 
     { 
      tm = after_user_click ? 6000 : 3000; 
      setTimeout(function(){ 
       Slider.Change(); 
       Slider.Init(); //Restart the init process. 
      },tm) 
     }, 
     Change : function() 
     { 
      if(this.current == 5) 
      { 
       $("#button a[rel='1']").click(); //Click the first 
      }else 
      { 
       $("#button a[rel='"+(this.current+1)+"']").click(); //Click the first 
      } 
     } 
    } 

    $('#button a').click(function(){ 
     var integer = $(this).attr('rel'); 
     $('#myslide .cover').css({left:-960*(parseInt(integer)-1)}).hide().fadeIn(); 
     Slider.Init(true); 
     $('#button a').each(function(){ 
     $(this).removeClass('active'); 
      if($(this).hasClass('button'+integer)){ 
       $(this).addClass('active')} 
     }); 
    }); 

    //Start the slider. 
    Slider.Init(); 
});

注意：這是未經測試的和我的頭頂！

來源

2010-09-21 11:35:11 RobertPitt

解決方案通過sje397將工作 - 這裏的替代之後淡入

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/JavaScript"> 
$(document).ready(function(){ 
    function showSlide(integer) { 
     $('#myslide .cover').css({left:-960*(integer-1)}).hide().fadeIn(function() { 
      showSlide((integer % 5) + 1); 
     }); 
     $('#button a').removeClass('active'); 
     $('#button a.button' + integer).addClass('active'); 
    } 
    showSlide(1); 
}); 
</script>

來源

2010-09-21 11:36:40 VinayC

我怎樣才能使這個淡入淡出成爲幻燈片？

回答

相關問題