如何在滑块

Question

小提琴：https://jsfiddle.net/fLfg7yqn/

JQuery的：

$(function () {
    $('.dvContentSlide').not(':eq(0)').addClass("dispNone");
    $('.dvContentSlide:eq(0)').addClass("slideIsActive");
    var g = parseInt($('div.slideIsActive').index()) + 1;
    var u = $(".dvContentSlide").length;
    $("#spCur").text("Current Index: " + g);
    $("#spDVLen").text("SLIDE div length: " + $(".dvContentSlide").length);

    for (var i = 0; i < u; i++)
        $(".ulContentSliderNav").append('<li><a href="javascript:void(0);"><span></span></a></li>');

    $(".ulContentSliderNav :first-child a").addClass("ulContentSliderNavSel");
    $(".cSlider").mouseover(function () {
        clearInterval(po);
    }).mouseout(function () {
        po = setInterval(AutoSlide, 4000);
    });

    $(".ulContentSliderNav a").click(function (e) {
        e.preventDefault();
        $(this).parent().parent().find(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
        $(this).addClass("ulContentSliderNavSel");

        GoToTheSlide($(this).parent().index());
    });

    function GoToTheSlide(t) {
        $('.dvContentSlide').addClass("dispNone");
        $('.dvContentSlide').removeClass("slideIsActive");
        $('.dvContentSlide:nth-child(' + ++t + ')').addClass("slideIsActive").removeClass("dispNone");
    }

    $("#aContentSliderNext").click(function () {
        var k = $('div.slideIsActive').index() + 1;
        if (k >= $(".dvContentSlide").length) {
            k = 1;
            $('.dvContentSlide').not(':eq(0)').addClass("dispNone").removeClass("slideIsActive");
            $('.dvContentSlide:eq(0)').addClass("slideIsActive").removeClass("dispNone");
        }
        else {
            $(".dvContentSlide:nth-child(" + k + ")").removeClass("slideIsActive").addClass("dispNone");
            $(".dvContentSlide:nth-child(" + ++k + ")").removeClass("dispNone").addClass("slideIsActive");
        }
        $("#spCur").text("Current Index: " + k);
        $(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
        $(".ulContentSliderNav li:nth-child(" + k + ") a").addClass("ulContentSliderNavSel");
    });
    $("#aContentSliderPrev").click(function () {
        var k = $('div.slideIsActive').index() + 1;
        if (k <= 1) {
            k = $(".dvContentSlide").length;
            $('.dvContentSlide').not(':eq(' + k + ')').addClass("dispNone").removeClass("slideIsActive");
            $('.dvContentSlide:nth-child(' + k + ')').addClass("slideIsActive").removeClass("dispNone");
        }
        else {
            $(".dvContentSlide:nth-child(" + k + ")").removeClass("slideIsActive").addClass("dispNone");
            $(".dvContentSlide:nth-child(" + --k + ")").removeClass("dispNone").addClass("slideIsActive");
        }
        $("#spCur").text("Current Index: " + k);
        $(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
        $(".ulContentSliderNav li:nth-child(" + k + ") a").addClass("ulContentSliderNavSel");
    });

    function AutoSlide() {
        var k = $('div.slideIsActive').index() + 1;
        console.log(k);
        if (k >= $(".dvContentSlide").length) {
            k = 1;
            $('.dvContentSlide').not(':eq(0)').addClass("dispNone").removeClass("slideIsActive");
            $('.dvContentSlide:eq(0)').addClass("slideIsActive").removeClass("dispNone");
        }
        else {
            $(".dvContentSlide:nth-child(" + k + ")").removeClass("slideIsActive").addClass("dispNone");
            $(".dvContentSlide:nth-child(" + ++k + ")").removeClass("dispNone").addClass("slideIsActive");
        }
        $("#spCur").text("Current Index: " + k);
        $(".ulContentSliderNavSel").removeClass("ulContentSliderNavSel");
        $(".ulContentSliderNav li:nth-child(" + k + ") a").addClass("ulContentSliderNavSel");
    }
    var po = setInterval(AutoSlide, 4000);
});

除了如何更新jquery / css之外，一切都工作得很好，而不是显示幻灯片，它淡出当前幻灯片并在下一张幻灯片中淡化，保持结构不变。

Answer 1

你试过fadeOut（）fadeIn（）吗？我在您的代码中没有看到它，请点击此链接查看它是否符合您的need。