我怎样才能使这个淡入淡出成为幻灯片？

我有以下代码，可以在不同幻灯片之间自动幻灯片显示，如图所示。我怎样才能使这个淡入淡出成为幻灯片？

现在，当我点击图片上显示的数字时，现在会产生一个淡入淡出，但是我想在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

我怎样才能使这个淡入淡出成为幻灯片？

回答

相关问题