Question

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

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

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>

我怎么能自动将这个fadeIn变成幻灯片？

3 个答案: