图像旋转脚本不按顺序

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> 

我相信，这将解决你的问题。