我怎样才能自动将淡入变成幻灯片？

Question

我有以下代码，可以自动在不同幻灯片之间显示幻灯片，如图所示。

现在，每当我单击图片上显示的数字时，就会产生淡入，但我想自动在 1 到 5 之间进行转换，并在 5 上定时再次返回到 1 。

截图为：

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

Answer 1

以下假设您将删除数字按钮，并且您的幻灯片编号为 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> 

Answer 2

嗯，尝试一下以下

$(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();
});

注意事项：这是未经测试的，而且是我的想法！

Answer 3

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>