我已經構建了一個簡單的輪播，可以淡入/淡出各種影像。當 JS 更改類時，CSS 中會發生視覺變化。
這與兩張幻燈片完美配合。現在我介紹了第三個它沒有，我現在可以看到為什么它與 2 一起作業而與 3 或更多無關。
基本上我想要實作的是：
腳本每 7 秒洗掉 的所有實體slide--active并將其添加到回圈中的下一個專案。
我在整個站點中都使用 Jquery，因此使用它是有意義的。下面的CSS可以忽略，我只對類的變化感興趣。
$('.slides').each(function(i, item) {
setInterval(
function() {
$('.slide').toggleClass('slide--active');
},
7000 i)
});.slide {
width: 4em;
height: 4em;
background: blue;
}
.slide--active {
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="slides">
<li class="slide slide--active"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>uj5u.com熱心網友回復：
你可以這樣做：
setInterval(
function() {
var item = $(".slide--active");
var next = item.next(".slide").length == 0 ? $('.slide').first() : item.next(".slide")
item.removeClass("slide--active");
next.toggleClass('slide--active');
},
2000)
這將從當前元素中洗掉活動類，并在下一個元素上設定活動類（如果當前元素是最后一個元素，則為第一個元素）
演示
顯示代碼片段
setInterval(
function() {
var item = $(".slide--active");
var next = item.next(".slide").length == 0 ? $('.slide').first() : item.next(".slide")
item.removeClass("slide--active");
next.toggleClass('slide--active');
},
2000).slide {
width: 4em;
height: 4em;
background: blue;
}
.slide--active {
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="slides">
<li class="slide slide--active"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>uj5u.com熱心網友回復：
正如我在評論中解釋的那樣，您應該只切換當前幻燈片和下一張幻燈片。最后一張幻燈片完成后，最后重置為第一張幻燈片。
// Get the number of slides
let totalSlides = $('.slides .slide').length;
setInterval(function(){
let current = false;
$('.slide').each(function(i, item) {
if(!current){
if(item.classList.contains('slide--active')){
if(i === totalSlides - 1)
{
$('.slide:first-child').addClass('slide--active');
}
item.classList.toggle('slide--active');
current = true;
}
} else {
item.classList.toggle('slide--active');
current = false;
return false;
}
});
}, 7000);.slide {
width: 4em;
height: 4em;
background: blue;
}
.slide--active {
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="slides">
<li class="slide slide--active"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>uj5u.com熱心網友回復：
let currentIndex = 0;
const slides = $('.slide');
const numberOfSlides = slides.length;
setInterval(() => {
// Find next item index
currentIndex = ((currentIndex 1) % numberOfSlides);
// Remove class from all slides
slides.removeClass('slide--active');
// Add class to a next item
slides.eq(currentIndex).addClass('slide--active')
}, 7000)
或者您可以跟蹤以前的索引并從上一張幻燈片中洗掉類。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/491985.html
標籤：javascript jQuery
上一篇：如何在輪播中映射陣列以做出反應