JavaScript实现图片切换

最新推荐文章于 2023-09-21 22:55:09 发布

脚踏实地，坚持不懈!

最新推荐文章于 2023-09-21 22:55:09 发布

阅读量841

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_43228946/article/details/126354515

版权

JavaScript实现图片切换：

<!DOCTYPE html>
<html lang="en">
<head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>图片切换案例</title>
                  <style>
                                    *{
                                                      margin: 0;
                                                      padding: 0;
                                    }
                                    #d1{
                                                      width: 1200px;
                                                      margin: 50px auto;
                                                      padding:10px;
                                                      background-color: aqua;
                                                      text-align: center;
                                    }
                  </style>
</head>
<body>
      <div id ="d1">
                  <p id="pi">总共有4张照片,这是第1张</p>
                  <img src="./picture/1.jpg" alt="图片切换案例">
                  <button id="btn1">上一张</button>
                  <button id="btn2">下一张</button>
      </div>  
      <script>
                  //先定义一个数组来存储图片路径
                  var pic = ["./picture/1.jpg","./picture/2.jpg","./picture/3.jpg","./picture/4.jpg"];
                  //获取button的对象
                  var btn1 = document.getElementById("btn1");
                  var btn2 = document.getElementById("btn2");

                  var index = 2;

                  //获取P标签的对象
                  var pi = document.getElementById("pi");
                  pi.innerHTML = "总共有"+pic.length+"张照片,这是第"+(index+1)+"张";

                  var img = document.getElementsByTagName("img")[0];
                  console.log(img);//<img src="./picture/1.jpg" alt="图片切换案例">
                  console.log(document.getElementsByTagName("img"));//HTMLCollection [img]

                  btn1.addEventListener('click',function(){
                                    index--;
                                    if(index<0){
                                                      index = pic.length-1;
                                    }
                                    img.src = pic[index];
                                    pi.innerHTML = "总共有"+pic.length+"张照片,这是第"+(index+1)+"张";
                                    
                  });
                  btn2.addEventListener('click',function(){
                                    index++;
                                    if(index>pic.length-1){
                                                      index = 0;
                                    }
                                    img.src = pic[index];
                                    pi.innerHTML = "总共有"+pic.length+"张照片,这是第"+(index+1)+"张";
                                    
                  });
      </script>          
</body>
</html>