用旋轉木馬在元素上切換類

Question

我有一個「自制」旋轉木馬的問題，我不能使用Bootstrap提供的一個標準。

這裏是約我的代碼結構：

圖片

<img src="1.img"/> 
<img src="2.img"/> 
<img src="3.img"/> 

上一頁/下一頁按鈕

<div class="left"></div> left button 
<div class="right"></div> right button 

這些按鈕讓我來回走通過 「OL」 的元素。

01表

<ol> 
     <li>Circle 1</li> 
     <li class="active">Circle 2</li> 
     <li>Circle 3</li> 
</ol> 

如果我點擊一個按鈕時，相應的數據將被加載並在其上點擊我將有一個「活動」類的按鈕。

上一個/下一個按鈕也一樣，這就是問題所在。給定一個包含三個元素的HTML「ol」，我必須進行迭代，因此，如果我在第二個li元素中，如果我單擊Next，它將會出現在第三個li元素上，如果我單擊Back它會回到第一個

我假設從第二個元素開始並且類是活動的。

我可以使用jQuery的prev（）和next（）函數，但我必須做一個for循環，因爲當我在最後一個li元素中，如果我點擊「next」按鈕，第一個li元素必須選擇，反之亦然，如果我在第一，最後必須「選定」。

結果實際上是這樣的。

的onclick「下一步」（反過來用「上一頁」亦然）

$("li.active").next().addClass("active"); 
$("li.active").prev().removeClass("active"); 

兩個問題： 1）當我的第一個元素，我點擊進入到第二，將「活動「類被賦予第三個li元素而不是第二個元素，但是如果我從最後一個元素開始，這個工作正常 2）如果我在第一個元素中，如果我回去，它不會選擇最後一個元素，反之亦然

我想我需要一個循環來做到這一點。你可以幫我嗎？謝謝。

Answer 1

下面是一個按鈕的代碼：

$(".next").on("click", function(){ 
    moveToNext(); 
});//.next click 

function moveToNext() 
{ 
    var curIndex = $("ol li.active").index(); 
    var totalSlides = $("ol li").length; 
    var nextIndex = curIndex + 1; 

    if(nextIndex >= totalSlides) 
    { 
    nextIndex = 0; 
    }//if 

    $("ol li.active").removeClass("active"); 
    $("ol li").eq(nextIndex).addClass("active").trigger("click"); 

}//moveToNext(); 

你同樣可以實現爲一個按鈕。

Answer 2

純JavaScript解決方案。隨着下一個&以前。

var next = document.querySelector('#next'); 
 
var previous = document.querySelector('#previous'); 
 
var images = document.querySelectorAll('.slider img'); 
 
var ols = document.querySelectorAll('.slider ol li'); 
 
var count = 0; 
 

 
if (next) { 
 
    next.addEventListener('click', nextImage, false); 
 
    previous.addEventListener('click', prevImage, false); 
 
} 
 

 
for (var i = 0; i < ols.length; i++) { 
 
    var element = ols[i]; 
 
    element.addEventListener('click', function() { 
 

 
    for (var i = 0; i < images.length; i++) { 
 
     if (images[i].classList.contains('active')) { 
 
     images[i].classList.remove('active'); 
 
     } 
 
     if (ols[i].classList.contains('active')) { 
 
     ols[i].classList.remove('active'); 
 
     } 
 
    } 
 

 
    images[this.dataset.count].classList.add('active'); 
 
    ols[this.dataset.count].classList.add('active'); 
 
    count = this.dataset.count; 
 
    }); 
 
} 
 

 
function nextImage() { 
 
    for (var i = 0; i < images.length; i++) { 
 
    if (images[i].classList.contains('active')) { 
 
     images[i].classList.remove('active'); 
 
    } 
 
    if (ols[i].classList.contains('active')) { 
 
     ols[i].classList.remove('active'); 
 
    } 
 
    } 
 
    if (count === images.length - 1) { 
 
    count = 0; 
 
    images[count].classList.add('active'); 
 
    ols[count].classList.add('active'); 
 
    } else { 
 
    count++; 
 
    images[count].classList.add('active'); 
 
    ols[count].classList.add('active'); 
 
    } 
 

 
} 
 

 
function prevImage() { 
 
    for (var i = 0; i < images.length; i++) { 
 
    if (images[i].classList.contains('active')) { 
 
     images[i].classList.remove('active'); 
 
    } 
 
    if (ols[i].classList.contains('active')) { 
 
     ols[i].classList.remove('active'); 
 
    } 
 
    } 
 
    if (count === 0) { 
 
    count = images.length - 1; 
 
    images[count].classList.add('active'); 
 
    ols[count].classList.add('active'); 
 
    } else { 
 
    count--; 
 
    images[count].classList.add('active'); 
 
    ols[count].classList.add('active'); 
 
    } 
 

 
}

img { 
 
    width: 120px; 
 
    height: 120px; 
 
} 
 
img.active { 
 
    background: #DDD; 
 
} 
 
li.active { 
 
    color: #000; 
 
    background: #ddd; 
 
} 
 
ol li { 
 
    background: #fff; 
 
    border: 1px solid #DDD; 
 
    cursor: pointer; 
 
    padding: 3px; 
 
    display: inline-block; 
 
}

<div class="slider"> 
 

 
    <img class='active' src="" /> 
 
    <img src="" /> 
 
    <img src="" /> 
 

 
    <ol> 
 
    <li data-count='0' class="active">Circle 1</li> 
 
    <li data-count='1'>Circle 2</li> 
 
    <li data-count='2'>Circle 3</li> 
 
    </ol> 
 
</div> 
 

 
<button id="previous">Previous</button> 
 

 
<button id="next">Next</button>