圖像滑塊不會轉到下一個或上一個項目

Question

（當我單擊上一個 V 形滑塊時，我遇到了一個問題，滑塊工作一次並在下一次單擊后停止）

我是 JavaScript 的初學者，我正在嘗試構建自己的滑塊代碼。 起初，當您單擊下一個 V 形時，代碼運行良好，但是當我單擊上一個 V 形時，第二次單擊后代碼停止。

$(document).ready(function(){
    var currentImg = $('.slider-img .active');
    var nextImg = currentImg.next();
    var prevImg = currentImg.prev();

//slide to right
$('.next').on('click', function(){
    if(!currentImg.is(':last-child')){
        currentImg.delay(1000).removeClass('active');
        nextImg.addClass('active');
    }else{
        currentImg.delay(1000).removeClass('active');
        $('.slider-img div').eq(0).addClass('active');
    }      
});

//Slide to left
$('.prev').on('click', function(){
    if(!currentImg.is(':first-child')){
        currentImg.delay(1000).removeClass('active');
        prevtImg.addClass('active');
    }else{
        currentImg.delay(1000).removeClass('active');
        $('.slider-img div:last-child').addClass('active');
    }

 });
 });

在下面的codepen上有完整的代碼

Answer 1

因為你在click事件之外聲明你的變量，當document ready currentImg是第一個元素，點擊后， currentImg需要再次檢測，因為現在它是第二個元素，所以為了避免這個問題，將你的variable移動到你的click處理程序中：

$('.next').on('click', function(){
    var currentImg = $('.slider-img .active');
    var nextImg = currentImg.next();
    var prevImg = currentImg.prev();

    if(!currentImg.is(':last-child')){
        currentImg.delay(1000).removeClass('active');
        nextImg.addClass('active');
    }else{
        currentImg.delay(1000).removeClass('active');
        $('.slider-img div').eq(0).addClass('active');
    }      
});

改進的版本是：

 $(document).ready(function() { var firstChild = $('.slider-img div.item').eq(0); var lastChild = $('.slider-img div.item:last-child'); //slide to right $('.next').on('click', function() { var currentImg = $('.slider-img .active'); var nextImg = currentImg.next(); if (!currentImg.is(':last-child')) { currentImg.delay(1000).removeClass('active') nextImg.addClass('active') } else { currentImg.delay(1000).removeClass('active') firstChild.addClass('active'); } }); //Slide to left $('.prev').on('click', function() { var currentImg = $('.item.active'); var prevImg = currentImg.prev(); if (currentImg.is(':first-child')) { currentImg.delay(1000).removeClass('active') lastChild.addClass('active') } else { currentImg.delay(1000).removeClass('active') prevImg.addClass('active'); } }); });

 * { padding: 0; margin: 0; } .slider { position: relative; width: 600px; height: 500px; margin: 30px auto 0; } .slider ul { position: absolute; bottom: 20px; width: 100%; text-align: center; z-index: 3; } .slider ul li { width: 12px; height: 12px; border-radius: 50%; background-color: #cccccc; list-style: none; margin: 0 10px; display: inline-block; cursor: pointer; } .slider ul li.active { background-color: #000; } .slider-img div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; } .slider-img div.active { opacity: 1; } .slider-img img { max-width: 100%; height: 100%; } .slider p { position: absolute; z-index: 2; top: 50%; color: #cccccc; padding: 20px; cursor: pointer; } .slider .next { right: 0; } .item1 { background-color: red } .item2 { background-color: green } .item3 { background-color: purple } .item4 { background-color: yellow }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="slider"> <ul> <li class="dot active" onclick="currentSlide(1)"></li> <li class="dot" onclick="currentSlide(2)"></li> <li class="dot" onclick="currentSlide(3)"></li> <li class="dot" onclick="currentSlide(4)"></li> </ul> <div class="slider-img"> <div class="item item1 active"></div> <div class="item item2"></div> <div class="item item3"></div> <div class="item item4"></div> </div> <p class="next"> > </p> <p class="prev"> < </p> </section>

Answer 2

問題是一旦單擊上一個或下一個按鈕，您就不會將variable設置為新value 。

這就是它的工作原理，即使您的方法有點復雜：

（另外我建議在variable declaration使用let而不是var ）

 $(document).ready(function(){ let currentImg = $('.slider-img .active'); let nextImg = currentImg.next(); let prevImg = currentImg.prev(); //slide to right $('.next').on('click', function(){ if(!currentImg.is(':last-child')){ currentImg.delay(1000).removeClass('active'); nextImg.addClass('active'); currentImg = nextImg; nextImg = currentImg.next(); }else{ currentImg.delay(1000).removeClass('active'); $('.slider-img div').eq(0).addClass('active'); currentImg = $('.slider-img .active'); nextImg = currentImg.next(); } }); $('.prev').on('click', function(){ if(!currentImg.is(':first-child')){ currentImg.delay(1000).removeClass('active'); prevImg.addClass('active'); currentImg = prevImg; prevImg = currentImg.prev(); }else{ currentImg.delay(1000).removeClass('active'); $('.slider-img div:last-child').addClass('active'); currentImg = $('.slider-img .active'); prevImg = currentImg.prev(); } }); });

 *{ padding: 0; margin: 0; } .slider{ position: relative; width:600px; height: 500px; margin: 30px auto 0; } .slider ul{ position: absolute; bottom: 20px; width: 100%; text-align: center; z-index: 3; } .slider ul li{ width:12px; height: 12px; border-radius: 50%; background-color: #cccccc; list-style: none; margin:0 10px; display: inline-block; cursor: pointer; } .slider ul li.active{ background-color: #000; } .slider-img div{ position: absolute; top:0; left:0; bottom: 0; right: 0; opacity: 0; } .slider-img div.active{ opacity: 1; } .slider-img img{ max-width: 100%; height: 100%; } .slider p{ position: absolute; z-index: 2; top: 50%; color: #cccccc; padding: 20px; cursor: pointer; } .slider .next{ right: 0; } .item1{background-color:red} .item2{background-color:green} .item3{background-color:purple} .item4{background-color:yellow}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <section class="slider"> <ul> <li class="dot active" onclick="currentSlide(1)"></li> <li class="dot" onclick="currentSlide(2)"></li> <li class="dot" onclick="currentSlide(3)"></li> <li class="dot" onclick="currentSlide(4)"></li> </ul> <div class="slider-img"> <div class="item item1 active"></div> <div class="item item2"></div> <div class="item item3"></div> <div class="item item4"></div> </div> <p class="next"> <i class="fas fa-chevron-right">next</i> </p> <p class="prev"> <i class="fas fa-chevron-left">prev</i> </p> </section>