循環中的CSS/JS Slider問題

Question

我有一個CSS/JS滑塊的問題。 我已經使用簡單的方法使其工作 - 更大的元素（container）內部較小（area）與隱藏溢出。 我在上面滑btn & btn2控制更大的元件的運動按鈕（containter）

的問題是，它只是工作，直到「第一張幻燈片」（藍色）到達，那麼它不可能滑到第二個（紅色）。

小提琴：所有的https://jsfiddle.net/26r32hb6

var button = document.querySelector('.btn'); 
 
var button2 = document.querySelector('.btn2'); 
 
var container = document.querySelector('.container'); 
 

 
button.style.background = 'blue'; 
 
button2.style.background = 'blue'; 
 
container.style.backgroundColor = 'blue'; 
 

 
button.onclick = function() { 
 
    if (container.style.left == 0) { 
 
    container.style.left = '-100.5%';  
 
    container.style.backgroundColor = 'red';  
 
    button.style.backgroundColor = 'red'; 
 
    button2.style.backgroundColor = 'red';} 
 
else if (container.style.left == '-100.5%') { 
 
    container.style.left = '-200.5%'; 
 
    container.style.backgroundColor = 'purple'; 
 
    button.style.backgroundColor = 'purple'; 
 
    button2.style.backgroundColor = 'purple';  
 
} 
 
}; 
 
button2.onclick = function() { 
 
    if (container.style.left == '-100.5%') { 
 
    container.style.left = 0; 
 
    container.style.backgroundColor = 'blue'; 
 
    button.style.backgroundColor = 'blue'; 
 
    button2.style.backgroundColor = 'blue';} 
 
    else if (container.style.left == '-200.5%') { 
 
    container.style.left = '-100.5%'; 
 
    container.style.backgroundColor = 'red';  
 
    button.style.backgroundColor = 'red'; 
 
    button2.style.backgroundColor = 'red'; 
 
} 
 
};

.wrapbtns { 
 
    width: 365px; 
 
    height: 50px; 
 
    background: yellow; 
 
} 
 
.btn { 
 
    width: 50px; 
 
    height: 50px; 
 
    float: right; 
 
} 
 
.btn2 { 
 
    width: 50px; 
 
    height: 50px; 
 
    float: left; 
 
    margin-right: 5px; 
 
} 
 
.btn, .btn2 { 
 
    transition-duration: 1s; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    color: white; 
 
    cursor: pointer; 
 

 
} 
 
.area { 
 
    width: 365px; 
 
    height: 250px; 
 
    overflow: hidden; /* This */ 
 
    position: relative; 
 
} 
 
.container { 
 
    background: blue; 
 
    width: 1100px; 
 
    height: 250px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: left; 
 
    align-items: center; 
 
    left: 0; 
 
    position: absolute; 
 
    transition-duration: 1s; 
 
} 
 
.box { 
 
    background: yellow; 
 
    min-width: 100px; 
 
    height: 100px; 
 
    margin: 1%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    color: black; 
 
    font-size: 48px; 
 
    transition-duration: 500ms; 
 
}

<div class="wrapbtns"> 
 
<div class="btn2">-X</div> 
 
<div class="btn">X</div></div> 
 

 
<div class="area"> 
 
    <div class="container"> 
 

 
    <div class="box">a</div> 
 
    <div class="box">b</div> 
 
    <div class="box">c</div> 
 
    <div class="box">d</div> 
 
    <div class="box">e</div> 
 
    <div class="box">f</div> 
 
    <div class="box">g</div> 
 
    <div class="box">h</div> 
 
    <div class="box">i</div> 
 
    <div class="box">j</div> 
 
    <div class="box">k</div> 
 
    <div class="box">l</div> 
 
    <div class="box">m</div> 
 
    <div class="box">n</div> 
 
    <div class="box">o</div> 
 
    <div class="box">p</div> 
 
    <div class="box">q</div> 
 
    <div class="box">r</div> 
 
    </div> 
 
</div>

Answer 1

首先，如果你使用類似jQuery這一切都容易得多。 但假設你只希望做這個使用JavaScript，這裏是我的解決方案：

（注：即使你使用jQuery，該技術是非常相似的一個解釋如下）

FIDDLE：https://jsfiddle.net/Bintang/kvowcj6w/

var button = document.querySelector('.btn'); 
var button2 = document.querySelector('.btn2'); 
var container = document.querySelector('.container'); 
var area = document.querySelector('.area'); 

button.style.background = 'blue'; 
button2.style.background = 'blue'; 
container.style.backgroundColor = 'blue'; 

var slideCurrent = 0; 
var slideTotal = Math.floor(container.offsetWidth/area.offsetWidth); 
var slideWidth = area.offsetWidth; 
var slideColors = ['blue', 'red', 'purple']; 

button.onclick = function() { 

    if (slideCurrent < slideTotal - 1) { 
    var left = container.style.left; 
    var leftInInteger = parseInt(left.replace("px", "")) || 0; 
    container.style.left = (leftInInteger - slideWidth) + "px" 
    slideCurrent += 1; 

    //STYLING 
    container.style.backgroundColor = slideColors[slideCurrent]; 
    button.style.backgroundColor = slideColors[slideCurrent]; 
    button2.style.backgroundColor = slideColors[slideCurrent]; 
    } 

}; 
button2.onclick = function() { 

    if (slideCurrent > 0) { 
    var left = container.style.left; 
    var leftInInteger = parseInt(left.replace("px", "")) || 0; 
    container.style.left = (leftInInteger + slideWidth) + "px"; 
    slideCurrent -= 1; 

    //STYLING 
    container.style.backgroundColor = slideColors[slideCurrent]; 
    button.style.backgroundColor = slideColors[slideCurrent]; 
    button2.style.backgroundColor = slideColors[slideCurrent]; 
    } 

}; 

說明：

，而不是使用if & else設置的「左」的具體值，每一次你W¯¯螞蟻滑動，你想要做的是增加「左」的值，每次你想滑向左邊&減少每次你想滑向右邊的值。 （看下面的代碼）

var slideCurrent = 0; 
var slideTotal = Math.floor(container.offsetWidth/area.offsetWidth); 
var slideWidth = area.offsetWidth; 
var slideColors = ['blue', 'red', 'purple']; 

button.onclick = function() { 

    if (slideCurrent < slideTotal - 1) { 
    var left = container.style.left; 
    var leftInInteger = parseInt(left.replace("px", "")) || 0; 
    container.style.left = (leftInInteger - slideWidth) + "px" 
    slideCurrent += 1; 

    //STYLING 
    container.style.backgroundColor = slideColors[slideCurrent]; 
    button.style.backgroundColor = slideColors[slideCurrent]; 
    button2.style.backgroundColor = slideColors[slideCurrent]; 
    } 

}; 

什麼上面的代碼做的是：

每隨時間的按鈕，點擊它會檢查當前的幻燈片是最後一張幻燈片

if (slideCurrent < slideTotal - 1) { 

2.如果它不是最後一張幻燈片，它將獲得「容器」的當前「左」值，那麼它將刪除「px」並將其從字符串變爲 整數（使用parseInt()函數），但如果「左」屬性尚未定義，它將被替換無線個「0」

var left = container.style.left; 
var leftInInteger = parseInt(left.replace("px", "")) || 0; 

3.Now的值，它有「左」的電流值在整數它可通過「區域」的寬度遞減的值，從而（在頂部的較小的元素）它會向右滑動，並通過一個

container.style.left = (leftInInteger - slideWidth) + "px" 
slideCurrent += 1; 

4.Lastly遞增slideCurrent變量，它會「容器」的顏色設置爲指定顏色

//STYLING 
container.style.backgroundColor = slideColors[slideCurrent]; 
button.style.backgroundColor = slideColors[slideCurrent]; 
button2.style.backgroundColor = slideColors[slideCurrent]; 

然後，你可以做與...相反滑向另一個方向。