圖像旋轉腳本不按順序

Question

所以我有一個圖像旋轉腳本，我正在爲客戶端。我對它的唯一問題是，它不會像我希望的那樣從上到下按順序進行。

的問題

，我有一個問題是，它會採取圖像，有時表現出同樣的圖像回互相備份這是一件好事，我真的不想的原因。如果你想看看到目前爲止我在做什麼，這裏是JsFiddle。

東西可以工作

是否有可能對我來說，id添加並在每個圖像，然後控制這樣的順序？

HTML

<section class="demo"> 
    <button class="next">Next</button> 
    <button class="prev">Previous</button> 
    <div class="container"> 
    <div style="display: inline-block;"> 
     <img src="http://placehold.it/100x100"/> 
    </div> 
    <div> 
    <img src="http://placehold.it/200x200"/> 
    </div> 
    <div> 
     <img src="http://placehold.it/300x300"/> 
    </div> 
    <div> 
     <img src="http://placehold.it/400x400"/> 
    </div> 
    <div> 
     <img src="http://placehold.it/500x500"/> 
    </div> 
    <div> 
     <img src="http://placehold.it/600x600"/> 
    </div> 
    <div> 
     <img src="http://placehold.it/700x700"/> 
    </div> 
    </div> 
</section> 

CSS

.container { 
    max-width: 400px; 
    background-color: black; 
    margin: 0 auto; 
    text-align: center; 
    position: relative; 
} 
.container div { 
    background-color: white; 
    width: 100%; 
    display: inline-block; 
    display: none; 
} 
.container img { 
    width: 100%; 
    height: auto; 
} 

button { 
    position: absolute; 
} 

.next { 
    right: 5px; 
} 

.prev { 
    left: 5px; 
} 

jQuery的

var currentIndex = 0, 
    items = $('.container div'), 
    itemAmt = items.length; 

function cycleItems() { 
    var item = $('.container div').eq(currentIndex); 
    items.hide(); 
    item.css('display','inline-block'); 
} 


$('.next').click(function() { 
    currentIndex += 1; 
    if (currentIndex > itemAmt - 1) { 
    currentIndex = 0; 
    } 
    cycleItems(); 
}); 

$('.prev').click(function() { 
    currentIndex -= 1; 
    if (currentIndex < 0) { 
    currentIndex = itemAmt - 1; 
    } 
    cycleItems(); 
}); 

個

非常感謝， 亞歷

Answer 1

你可以把一個ID在每個格和改變你的腳本：

var currentIndex = 0, 


items = $('.container div'), 
    itemAmt = items.length; 


function cycleItems() { 
    var item = document.getElementById(currentIndex); 
    items.hide(); 
    item.style.display = 'inline-block'; 
} 


$('.next').click(function() { 
    currentIndex += 1; 
    if (currentIndex > itemAmt - 1) { 
    currentIndex = 0; 
    } 
    cycleItems(); 
}); 

$('.prev').click(function() { 
    currentIndex -= 1; 
    if (currentIndex < 0) { 
    currentIndex = itemAmt - 1; 
    } 
    cycleItems(); 
}); 

並更改HTML到：

<section class="demo"> 
    <button class="next">Next</button> 
    <button class="prev">Previous</button> 
    <div class="container"> 
    <div id="1" style="display: inline-block;"> 
     <img src="https://placeimg.com/400/200/people"/> 
    </div> 
    <div id="2"> 
    <img src="https://placeimg.com/400/200/any"/> 
    </div> 
    <div id="3"> 
     <img src="https://placeimg.com/400/200/nature"/> 
    </div> 
    <div id="4"> 
     <img src="https://placeimg.com/400/200/architecture"/> 
    </div> 
    <div id="5"> 
     <img src="https://placeimg.com/400/200/animals"/> 
    </div> 
    <div id="6"> 
     <img src="https://placeimg.com/400/200/people"/> 
    </div> 
    <div id="7"> 
     <img src="https://placeimg.com/400/200/tech"/> 
    </div> 
    </div> 
</section> 

我相信，這將解決你的問題。