使用动态创建的img标签制作幻灯片效果的问题

Question

我假设for循环可以迭代nodeist对象，所以我不知道为什么它不能正常工作。我想迭代3个动态创建的img标签的for循环节点列表。首先，它们没有displayNone类，而其他img标签有。循环应该在每次迭代中检查element (img tag)是否没有该类，如果没有将该类添加到特定元素中，如果next不是列表的最后一个元素，则从next中删除该类。在这种情况下，class应该从最后一个元素中移除并添加到第一个元素中。为什么这个代码不能解决这个问题?这是在控制台面板上显示的错误:main.js:101 Uncaught TypeError: images[i]。不是一个函数(main.js:101): 1:1

function slideShow(){
var images = $("#slider img");
for (var i=0;i<images.length;i++){
if(i!=images.length-1){
if(images[i].not(".displayNone")){
images[i].addClass("displayNone");
images[i+1].removeClass("displayNone");
break;
}
}
else {
images[i].addClass("displayNone");
images[0].removeClass("displayNone");
}
}
setTimeout("slideShow()",3000);
}
slideShow();

Answer 1

putimages[i]into$()=$(images[i])

使用纯JavaScript:

使用element.classList.contains方法:

element.classList.contains(class);

function slideShow(){
var images = $("#slider img");
for (var i=0;i<images.length;i++){
if(i!=images.length-1){
if(!images[i].classList.contains(".displayNone")){ 
images[i].classList.add("displayNone");
images[i+1].classList.remove("displayNone");
break;
}
}
else {
images[i].classList.add("displayNone");
images[0].classList.remove("displayNone");
}
}
setTimeout("slideShow()",3000);
}
slideShow();

使用jQuery:

function slideShow(){
var images = $("#slider img");
for (var i=0;i<images.length;i++){
if(i!=images.length-1){
if(images[i].not(".displayNone")){ 
$(images[i]).addClass("displayNone");
$(images[i+1]).removeClass("displayNone");
break;
}
}
else {
$(images[i]).classList.add("displayNone");
$(images[0]).classList.remove("displayNone");
}
}
setTimeout("slideShow()",3000);
}
slideShow();