我对编码很陌生,我正在为一个项目制作一个网站。我试过用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/

10-11 23:27
查看更多