我对编码很陌生,我正在为一个项目制作一个网站。我试过用html和js编写幻灯片。我写的代码似乎什么也做不了。我为幻灯片添加的按钮在那里,但是我无法让它们执行它们的功能,我也无法确定我添加的图像数组是否在那里。
我试着在我的知识允许的范围内转换代码,但现在我放弃了。
HTML格式
<img src="images/a.jpg" alt="" id="slide" width="850" height="450">
<!--buttons-->
<input onclick="nextImage ()" type="button" class="next" value="Next"> </input>
<input onclick="prev" type="button" class="previous" value="Previous"> </input>
JavaScript
var myImage= document.getElementById('slide')
var imageArray=["images/a.jpg","images/b.jpg","images/c.jpg","images/d.jpg" ];
var imageIndex= 1;
function nextImage (){
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if (imageIndex >3 ){imageIndex=0;}
最佳答案
我会这样做:
只需添加两个按钮就可以简化html
HTML格式
<img src="images/a.jpg" alt="" id="slide" width="850" height="450">
<button id="next"></button>
<button id="prev"></button>
JS公司
附加事件侦听器,它将根据单击的按钮调用下一个和上一个函数。函数内部的逻辑几乎保持不变,注意数组索引。保持imageIndex的全局性,就像以前一样。
let myImage = document.getElementById('slide')
let imageArray = ["images/a.jpg", "images/b.jpg", "images/c.jpg", "images/d.jpg"];
let imageIndex = 1;
function nextImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex === imageArray.length) {
imageIndex = 0;
}
}
function previousImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex--
if (imageIndex === -1) {
imageIndex = imageArray.length - 1;
}
}
document.getElementById('next').addEventListener('click', () => nextImage())
document.getElementById('prev').addEventListener('click', () => previousImage())
还没测试过,但逻辑应该没问题
关于javascript - Javascript错误:函数未执行,也不确定图像数组是否已成功添加,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57741592/