所以我有一个我为客户端制作的图像旋转器脚本。我遇到的唯一问题是它不会像我希望的那样从上到下按顺序排列。
问题
我遇到这个问题的原因是它会拍摄图像,有时会相互显示相同的图像,这是我真正不想要的。如果你想看看我到目前为止所做的事情,那么这是 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();
});
非常感谢, 亚历
答案 0 :(得分:0)
您可以在每个div中添加一个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>
我相信这会解决您的问题。