Question

我正在尝试使用新的jQuery运行滑块，因为某些函数（如rotate）已弃用。当页面上传时，滑块工作正常，我正在从右侧单击选项卡加载图像。单击选项卡时，将删除当前图像和当前活动选项卡，并且正确加载新图像和新活动选项卡，而不是我调用startSlider（）;再次起作用，但我失去了i的变量值，所以我的startSlider（）;运行时不加载图像和活动标签背景。请帮我解决这个问题。这是幻灯片图片：

这是我的jQuery代码：

$(function() {

    var count = $(".ui-tabs-nav li").length;
    var slideSpeed = 5000;
    var fadingSpeed = 300;
    var i = 1;
    var $slider = $('#featured');

    var interval;

    function startSlider() {
        interval = setInterval(function() {

            $("#fragment-"+i).fadeOut(fadingSpeed, function() {
                $(this).removeClass("ui-tabs-activated");
                $('#nav-fragment-'+i).removeClass("ui-tabs-active");

                a = i+1;

                if (i == count) {
                    a = 1;
                    i = 0;
            }

            $('#nav-fragment-'+a).addClass("ui-tabs-active");
            $("#fragment-"+a).fadeIn(fadingSpeed, function() {
                $(this).addClass("ui-tabs-activated");
            });

            i++;

            });

        }, slideSpeed); // End setInterval function
    }

    function stopSlider() {
        clearInterval(interval);
    }

    $('.ui-tabs-nav-item > a').click(function(evt){

        evt.preventDefault();
        stopSlider();
        i = $(this).attr('href'); // href's are values from 1, 2, 3, 4, or 5
        var id = $(".ui-tabs-active > a").attr('href');

        $(".ui-tabs-nav li").removeClass("ui-tabs-active"); // This remove current tab background
        $("#fragment-"+id).remove(); // This remove div with current image

        $("#fragment-"+i).fadeIn(fadingSpeed, function() {
            $(this).addClass("ui-tabs-activated"); // Load new image
            $('#nav-fragment-'+i).addClass("ui-tabs-active"); // Set active background
        });
        startSlider(); // Start slider again
    });
    startSlider();
}); // jQuery function

Answer 1

好吧，startslider（）使用变量i来淡化和删除活动类，使用变量a来添加fadein并添加活动类。

点击后，您使用变量i表示fadein并添加活动类。变量i是全局的，因此当您重新启动startslider（）时，它将使用i淡出。

此外，点击后您将删除一个元素，但在您现在的代码中，我没有看到添加新元素或加载图像的任何内容。

带有新jQuery的精选滑块

1 个答案: