javascript - 如何使此 slider 自动

Question

我创建了一个手动 slider ，但我想让 slider 自动播放。当您按下 slider /按钮时，我使用数据位置使每张幻灯片都出现在前面。我如何在不修改所有 js 的情况下做到这一点？或者，如果您可以帮助我使用相同的 slider ，但只是自动的？欢迎任何解决方案。

Here is my code

jQuery(document).ready(function () {

    function detect_active() {
        // get active
        var get_active = $("#dp-slider .dp_item:first-child").data("class");
        $("#dp-dots li").removeClass("active");
        $("#dp-dots li[data-class=" + get_active + "]").addClass("active");
    }

    $("#dp-dots li").click(function () {
        $("#dp-dots li").removeClass("active");
        $(this).addClass("active");
        var get_slide = $(this).attr('data-class');
        $("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
        $.each($('#slider .dp_item'), function (index, dp_item) {
            $(dp_item).attr('data-position', index + 1);
        });
    });


    $("body").on("click", "#dp-slider .dp_item:not(:first-child)", function () {
        var get_slide = $(this).attr('data-class');
        $("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
        $.each($('#slider .dp_item'), function (index, dp_item) {
            $(dp_item).attr('data-position', index + 1);
        });

        detect_active();
    });
    $("#dp-dots .first,#dp-slider .item-1").click(function () {
        $(".div-1").addClass('is-active');
        $(".item-1 .dp-content").addClass('opacity');
        $(".item-1 .dp-content img").addClass('fade-up');
        $(".item-2 .dp-content").removeClass('opacity');
        $(".item-2 .dp-content img").removeClass('fade-up');
        $(".item-3 .dp-content").removeClass('opacity');
        $(".item-3 .dp-content img").removeClass('fade-up');
        $(".div-2").removeClass('is-active');
        $(".div-3").removeClass('is-active');
    });

    $("#dp-dots .second, .item-2").click(function () {
        $(".div-1").removeClass('is-active');
        $(".item-1 .dp-content").removeClass('opacity');
        $(".item-1 .dp-content img").removeClass('fade-up');
        $(".item-2 .dp-content").addClass('opacity');
        $(".item-2 .dp-content img").addClass('fade-up');
        $(".item-3 .dp-content").removeClass('opacity');
        $(".item-3 .dp-content img").removeClass('fade-up');
        $(".div-3").removeClass('is-active');
        $(".div-2").addClass('is-active');
    });

    $("#dp-dots .third, .item-3").click(function () {
        $(".div-1").removeClass('is-active');
        $(".item-1 .dp-content").removeClass('opacity');
        $(".item-1 .dp-content img").removeClass('fade-up');
        $(".item-2 .dp-content").removeClass('opacity');
        $(".item-2 .dp-content img").removeClass('fade-up');
        $(".item-3 .dp-content").addClass('opacity');
        $(".item-3 .dp-content img").addClass('fade-up');
        $(".div-2").removeClass('is-active');
        $(".div-3").addClass('is-active');
    });

});

#home .content-slider {
    height: 600px;
    display: flex;
    justify-content: flex-end;
    position: relative;
    align-items: center;
    margin-top: -100px;
}

#home .text {
    margin-right: 50px;
    margin-top: -150px;
}

#home .div-1, #home .div-2, #home .div-3 {
    opacity: 0;
    left: -1000px;
    position: absolute;
    width: 320px;
    transition: 1s ease-in-out;
}

#home .is-active {
    opacity: 1;
    left: 160px;
}

#home .div-1, #home .div-2, #home .div-3 {
    text-align: right;
}

#home .div-1 h1, #home .div-2 h1, #home .div-3 h1 {
    font-family: Raleway-black;
    color: #000;
    text-transform: uppercase;
}

#home .div-1 p, #home .div-2 p, #home .div-3 p {
    font-family: Raleway-semi-bold;
    color: #333333;
}

#home .extra-bold {
    font-family: Raleway-extra-bold;
}

#home #slider {
    margin-right: 200px;
    margin-top: -150px;
}

#home .dp-wrap {
    margin: 0 auto;
    position: relative;
    height: 100%;
    width: 750px;
}

#home #dp-slider {
    width: 100%;
    height: 100% !important;
}

#home #slider .dp_item {
    display: block;
    position: absolute;
    color: #FFF;
    border-radius: 10px;
    transition: transform 1.2s;

}

#home #slider .dp-content {
    transition: 0.5s;
    opacity: 0;
}

#home #slider .item-1 {
    background-color: #cf132a;
}

#home .opacity {
    opacity: 1 !important;
}

#home #slider .item-1 img, #home #slider .item-2 img, #home #slider .item-3 img {
    width: 300px;
    filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3));
    margin-left: 50px;
    top: 50px;
    position: relative;
    z-index: 1;
    transition: 1s ease-in-out;

}

#home .fade-up {
    top: 5px !important;
}

#home #slider .item-1 .absolute, #home #slider .item-2 .absolute, #home #slider .item-3 .absolute {
    font-family: Raleway-black;
    color: #a2a2a2;
    opacity: 0.33;
    position: absolute;
    letter-spacing: 15px;
    font-size: 1.8rem;
}

#home #slider .item-1 .line-1 {
    bottom: -60px;
    right: 30px;
}

#home #slider .item-1 .line-2 {
    bottom: -100px;
    right: -10px;
}

#home #slider .item-2 .line-1 {
    bottom: -60px;
    right: 20px;
}

#home #slider .item-2 .line-2 {
    bottom: -100px;
    right: 0;
}

#home #slider .item-3 .line-1 {
    bottom: -60px;
    right: 50px;
}

#home #slider .item-3 .line-2 {
    bottom: -100px;
    right: 0;
}

#home #slider .item-2 {
    background-color: #e3e3e3;
}

#home #slider .item-3 {
    background-color: #ffffff;
}

#home #dp-slider .dp_item:first-child {
    z-index: 10 !important;
    transform: rotateY(0deg) translateX(0px) !important;
}

#home #slider .dp_item[data-position="2"] {
    z-index: 9;
    transform: rotateY(0deg) translateX(10%) translateY(-15%) scale(0.9);
}

#home .transform {
    transform: rotateY(0deg) translateX(10%) translateY(-15%) scale(0.9) !important;
}

#home #slider .dp_item[data-position="3"] {
    z-index: 8;
    transform: rotateY(0deg) translateX(20%) translateY(-25%) scale(0.8);
}


#home #dp-dots {
    display: flex;
    position: absolute;
    top: -20px;
    z-index: 12;
    right: 30px;
    cursor: default;
    padding: 0;
}

#home #dp-dots li {
    list-style: none;
    width: 9px;
    background: #fff;
    border-radius: 10px;
    margin: 0 3px;
    filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.6));
    cursor: pointer;
}

#home #dp-dots .first {
    height: 55px;
}

#home #dp-dots .second {
    height: 45px;
}

#home #dp-dots .third {
    height: 35px;
}

#home #dp-dots li.active {
    background: #cf132a;
}

#home #slider .dp_item {
    box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
    width: 750px;
    height: 280px;
}


#home #dp-slider .dp_item:hover:not(:first-child) {
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="home">
<div class="content-slider">
                <div class="text">
                    <div class="div div-1 is-active" data-class="1" data-position="1">
                        <h1>The New Hydra.VOX</h1>
                        <p>With state-of-the-art tech the VOX is the newest generation of Audiobyte D/A Converters, the
                            result of years of research.</p>
                    </div>
                    <div class="div div-2" data-class="2" data-position="2">
                        <h1>The New Hydra.HUB</h1>
                        <p>The next step towards the ultimate Audio Stack – the hub packs enhanced audio transport
                            capability with a set of digital tools for even the most demanding user.</p>
                       
                    </div>
                    <div class="div div-3" data-class="3" data-position="3">
                        <h1>The Hydra.ZAP Power Supply</h1>
                        <p>The ZAP is the dedicated, low-noise ultra-capacitor based power supply for the VOX HUB stack.
                            Attain supreme control over your digital equipment.</p>
     
                    </div>
                </div>
                <div id="slider">
                    <div class="dp-wrap">
                        <div id="dp-slider">
                            <div class="dp_item item-1" data-class="1" data-position="1">
                                <div class="dp-content opacity">
                                    <img class="fade-up" src="http://www.pngmart.com/files/6/Amplifier-PNG-File.png" alt="">
                                    <h1 class="absolute line-1">SUPREME IMMERSION</h1>
                                    <h1 class="absolute line-2">CONTEMPORARY DESIGN</h1>

                                </div>
                            </div>
                            <div class="dp_item item-2" data-class="2" data-position="2">
                                <div class="dp-content">
                                    <img class="fade-up" src="http://www.pngmart.com/files/6/Amplifier-PNG-File.png" alt="">
                                    <h1 class="absolute line-1">VERSATILITY</h1>
                                    <h1 class="absolute line-2">DIGITAL MASTERY</h1>
                                </div>
                            </div>

                            <div class="dp_item item-3" data-class="3" data-position="3">
                                <div class="dp-content">
                                    <img class="fade-up" src="http://www.pngmart.com/files/6/Amplifier-PNG-File.png" alt="">
                                    <h1 class="absolute line-1">HIGH PERFORMANCE</h1>
                                    <h1 class="absolute line-2">NO COMPROMISE</h1>
                                </div>
                            </div>

                        </div>

                        <ul id="dp-dots">
                            <li data-class="1" class="active first"></li>
                            <li data-class="2" class="second"></li>
                            <li data-class="3" class="third"></li>
                        </ul>
                    </div>
                </div>
            </div>
  </div>

Answer 1

您应该使用 setInterval 方法来自动播放幻灯片。例如，如果您单击一个按钮并通过事件触发更改幻灯片，则从第一个索引开始从 setInterval 调用该方法。并不断更改值以使幻灯片放映发生。我已经为你创建了一个例子。 (仅 3 张幻灯片)

jQuery(document).ready(function () {
  var ch = 1;
    function detect_active() {
        // get active
        var get_active = $("#dp-slider .dp_item:first-child").data("class");
        $("#dp-dots li").removeClass("active");
        $("#dp-dots li[data-class=" + get_active + "]").addClass("active");
    } 
  function callClickEvent(){
    $("#dp-dots li").removeClass("active");
    var curCh = "ul li:nth-child("+ch+")";
        $(curCh).addClass("active");
        var get_slide = $(curCh).attr('data-class');
        $("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
    
        $('#slider .dp_item:nth-child('+ch+')').attr('data-position', ch);
    $(".div-"+ch+"").addClass('is-active');
        $(".item-"+ch+" .dp-content").addClass('opacity');
        $(".item-"+ch+" .dp-content img").addClass('fade-up');
    var r1 = r2 =0; 
    if(ch == 1) {r1 = 2; r2 = 3;}
    if(ch == 2) {r1 = 1; r2 = 3;}
    if(ch == 3) {r1 = 1; r2 = 2;}
        $(".item-"+r1+" .dp-content").removeClass('opacity');
        $(".item-"+r1+" .dp-content img").removeClass('fade-up');
        $(".item-"+r2+" .dp-content").removeClass('opacity');
        $(".item-"+r2+" .dp-content img").removeClass('fade-up');
        $(".div-"+r1+"").removeClass('is-active');
        $(".div-"+r2+"").removeClass('is-active');
    ch++;
    if(ch>3) ch = 1;
  } 
  setInterval(callClickEvent,2000);

    $("body").on("click", "#dp-slider .dp_item:not(:first-child)", function () {
        var get_slide = $(this).attr('data-class');
        $("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
        $.each($('#slider .dp_item'), function (index, dp_item) {
            $(dp_item).attr('data-position', index + 1);
        });

        detect_active();
    });
});

#home .content-slider {
    height: 600px;
    display: flex;
    justify-content: flex-end;
    position: relative;
    align-items: center;
    margin-top: -100px;
}

#home .text {
    margin-right: 50px;
    margin-top: -150px;
}

#home .div-1, #home .div-2, #home .div-3 {
    opacity: 0;
    left: -1000px;
    position: absolute;
    width: 320px;
    transition: 1s ease-in-out;
}

#home .is-active {
    opacity: 1;
    left: 160px;
}

#home .div-1, #home .div-2, #home .div-3 {
    text-align: right;
}

#home .div-1 h1, #home .div-2 h1, #home .div-3 h1 {
    font-family: Raleway-black;
    color: #000;
    text-transform: uppercase;
}

#home .div-1 p, #home .div-2 p, #home .div-3 p {
    font-family: Raleway-semi-bold;
    color: #333333;
}

#home .extra-bold {
    font-family: Raleway-extra-bold;
}

#home #slider {
    margin-right: 200px;
    margin-top: -150px;
}

#home .dp-wrap {
    margin: 0 auto;
    position: relative;
    height: 100%;
    width: 750px;
}

#home #dp-slider {
    width: 100%;
    height: 100% !important;
}

#home #slider .dp_item {
    display: block;
    position: absolute;
    color: #FFF;
    border-radius: 10px;
    transition: transform 1.2s;

}

#home #slider .dp-content {
    transition: 0.5s;
    opacity: 0;
}

#home #slider .item-1 {
    background-color: #cf132a;
}

#home .opacity {
    opacity: 1 !important;
}

#home #slider .item-1 img, #home #slider .item-2 img, #home #slider .item-3 img {
    width: 300px;
    filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3));
    margin-left: 50px;
    top: 50px;
    position: relative;
    z-index: 1;
    transition: 1s ease-in-out;

}

#home .fade-up {
    top: 5px !important;
}

#home #slider .item-1 .absolute, #home #slider .item-2 .absolute, #home #slider .item-3 .absolute {
    font-family: Raleway-black;
    color: #a2a2a2;
    opacity: 0.33;
    position: absolute;
    letter-spacing: 15px;
    font-size: 1.8rem;
}

#home #slider .item-1 .line-1 {
    bottom: -60px;
    right: 30px;
}

#home #slider .item-1 .line-2 {
    bottom: -100px;
    right: -10px;
}

#home #slider .item-2 .line-1 {
    bottom: -60px;
    right: 20px;
}

#home #slider .item-2 .line-2 {
    bottom: -100px;
    right: 0;
}

#home #slider .item-3 .line-1 {
    bottom: -60px;
    right: 50px;
}

#home #slider .item-3 .line-2 {
    bottom: -100px;
    right: 0;
}

#home #slider .item-2 {
    background-color: #e3e3e3;
}

#home #slider .item-3 {
    background-color: #ffffff;
}

#home #dp-slider .dp_item:first-child {
    z-index: 10 !important;
    transform: rotateY(0deg) translateX(0px) !important;
}

#home #slider .dp_item[data-position="2"] {
    z-index: 9;
    transform: rotateY(0deg) translateX(10%) translateY(-15%) scale(0.9);
}

#home .transform {
    transform: rotateY(0deg) translateX(10%) translateY(-15%) scale(0.9) !important;
}

#home #slider .dp_item[data-position="3"] {
    z-index: 8;
    transform: rotateY(0deg) translateX(20%) translateY(-25%) scale(0.8);
}


#home #dp-dots {
    display: flex;
    position: absolute;
    top: -20px;
    z-index: 12;
    right: 30px;
    cursor: default;
    padding: 0;
}

#home #dp-dots li {
    list-style: none;
    width: 9px;
    background: #fff;
    border-radius: 10px;
    margin: 0 3px;
    filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.6));
    cursor: pointer;
}

#home #dp-dots .first {
    height: 55px;
}

#home #dp-dots .second {
    height: 45px;
}

#home #dp-dots .third {
    height: 35px;
}

#home #dp-dots li.active {
    background: #cf132a;
}

#home #slider .dp_item {
    box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
    width: 750px;
    height: 280px;
}


#home #dp-slider .dp_item:hover:not(:first-child) {
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="home">
<div class="content-slider">
                <div class="text">
                    <div class="div div-1 is-active" data-class="1" data-position="1">
                        <h1>The New Hydra.VOX</h1>
                        <p>With state-of-the-art tech the VOX is the newest generation of Audiobyte D/A Converters, the
                            result of years of research.</p>
                    </div>
                    <div class="div div-2" data-class="2" data-position="2">
                        <h1>The New Hydra.HUB</h1>
                        <p>The next step towards the ultimate Audio Stack – the hub packs enhanced audio transport
                            capability with a set of digital tools for even the most demanding user.</p>
                       
                    </div>
                    <div class="div div-3" data-class="3" data-position="3">
                        <h1>The Hydra.ZAP Power Supply</h1>
                        <p>The ZAP is the dedicated, low-noise ultra-capacitor based power supply for the VOX HUB stack.
                            Attain supreme control over your digital equipment.</p>
     
                    </div>
                </div>
                <div id="slider">
                    <div class="dp-wrap">
                        <div id="dp-slider">
                            <div class="dp_item item-1" data-class="1" data-position="1">
                                <div class="dp-content opacity">
                                    <img class="fade-up" src="http://www.pngmart.com/files/6/Amplifier-PNG-File.png" alt="">
                                    <h1 class="absolute line-1">SUPREME IMMERSION</h1>
                                    <h1 class="absolute line-2">CONTEMPORARY DESIGN</h1>

                                </div>
                            </div>
                            <div class="dp_item item-2" data-class="2" data-position="2">
                                <div class="dp-content">
                                    <img class="fade-up" src="http://www.pngmart.com/files/6/Amplifier-PNG-File.png" alt="">
                                    <h1 class="absolute line-1">VERSATILITY</h1>
                                    <h1 class="absolute line-2">DIGITAL MASTERY</h1>
                                </div>
                            </div>

                            <div class="dp_item item-3" data-class="3" data-position="3">
                                <div class="dp-content">
                                    <img class="fade-up" src="http://www.pngmart.com/files/6/Amplifier-PNG-File.png" alt="">
                                    <h1 class="absolute line-1">HIGH PERFORMANCE</h1>
                                    <h1 class="absolute line-2">NO COMPROMISE</h1>
                                </div>
                            </div>

                        </div>

                        <ul id="dp-dots">
                            <li data-class="1" class="active first"></li>
                            <li data-class="2" class="second"></li>
                            <li data-class="3" class="third"></li>
                        </ul>
                    </div>
                </div>
            </div>
  </div>