旧的javascript幻灯片只显示wihtout幻灯片(onclick）

Old javascript slide show wihtout slide just (onclick)

本文关键字：幻灯片 onclick wihtout 显示 javascript 旧的      更新时间：2023-09-26

你好，我需要用一个类似幻灯片的按钮来切换图像，但不需要滑动，我已经尝试了一些东西，希望有人能帮我处理这种代码。我在做这个

 <img id="imageswitch" src="image/1.jpg" width="400" height="286" alt="photo1" />
<script>
var image = document.getElementById("imageswitch")
    function switchImage(){
        if(image.src = "image/1.jpg"){
            image.src = "image/2.jpg";
        }else if(image.src = "image/2.jpg"){
            image.src = "image/3.jpg";
            console.log("marche")
        }else{
            console.log("dont work man")
        }
}
 document.getElementById("boutonright").addEventListener("click", function () {
        switchImage();
  });
  • 将图像路径放入阵列中
  • 点击按钮操作您的数组：

var image = document.getElementById("imageswitch"),
    images = [
      "http://placehold.it/400x286/fb0/?text=1",
      "http://placehold.it/400x286/0bf/?text=2",
      "http://placehold.it/400x286/bf0/?text=3"
    ];
function switchImage(){
  images.push( images.shift() );
  image.src = images[0];
}
document.getElementById("boutonright").addEventListener("click", switchImage);
#imageswitch{height:180px;}
<button id="boutonright">NEXT</button><br>
<img id="imageswitch" src="http://placehold.it/400x286/fb0/?text=1" alt="photo1" />

如果您想要同时拥有PREV和NEXT按钮：

var image = document.getElementById("imageswitch"),
    images = [
      "http://placehold.it/400x286/fb0/?text=1",
      "http://placehold.it/400x286/0bf/?text=2",
      "http://placehold.it/400x286/bf0/?text=3"
    ];
function switchImage(){
  if(this.id==="next") images.push( images.shift() );
  else /* id==="prev*/ images.unshift( images.pop() );
  image.src = images[0];
}
document.getElementById("prev").addEventListener("click", switchImage);
document.getElementById("next").addEventListener("click", switchImage);
#imageswitch{height:180px;}
<button id="prev">PREV</button><button id="next">NEXT</button><br>
<img id="imageswitch" src="http://placehold.it/400x286/fb0/?text=1" alt="photo1" />

相关文章：