轮播图(下一张)

JS轮播图(下一张)

1. 实现思路

点击按钮切换图片
- 获取两个按钮
要切换图片就是要修改 img 标签的 src 属性
- 获取 img 标签
- 创建一个数组，用来保存图片的路径
- 创建一个变量，来保存当前正在显示的图片索引
- 获取 id 为 info 的 p 元素
- 设置提示文字
- 为两个按钮分别绑定单机响应函数
切换到上一张，索引自减
判断 index 是否小于 0
当点击按钮以后，重新设置信息
切换到下一张，使 index 自增
切换图片就是修改 img 的 src 属性
- 要修该元素的属性元素.属性 = 属性值

2. 实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      * {
      
      
        margin: 0;
        padding: 0;
      }
      #outer {
      
      
        width: 500px;
        margin: 50px auto;
        padding: 10px;
        background-color: greenyellow;
        /*设置文本居中*/
        text-align: center;
      }
    </style>
    <script type="text/javascript">
      window.onload = function () {
      
      
        /*
         * 点击按钮切换图片
         */
        //获取两个按钮
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");
        /*
         * 要切换图片就是要修改img标签的src属性
         */

        //获取img标签
        var img = document.getElementsByTagName("img")[0];

        //创建一个数组，用来保存图片的路径
        var imgArr = [
          "img/1.jpg",
          "img/2.jpg",
          "img/3.jpg",
          "img/4.jpg",
          "img/5.jpg",
        ];

        //创建一个变量，来保存当前正在显示的图片索引
        var index = 0;

        //获取id为info的p元素
        var info = document.getElementById("info");
        //设置提示文字
        info.innerHTML =
          "一共" + imgArr.length + "张图片，当前第" + (index + 1) + "张";

        //为两个按钮分别绑定单机响应函数
        prev.onclick = function () {
      
      
          /*
           * 切换到上一张，索引自减
           */
          index--;

          //判断index是否小于0
          if (index < 0) {
      
      
            index = imgArr.length - 1;
          }

          //alert("上一张");
          img.src = imgArr[index];

          //当点击按钮以后，重新设置信息
          info.innerHTML =
            "一共" + imgArr.length + "张图片，当前第" + (index + 1) + "张";
        };

        next.onclick = function () {
      
      
          /*
           * 切换到下一张，使index自增
           */
          index++;

          if (index > imgArr.length - 1) {
      
      
            index = 0;
          }

          //alert("下一张");

          //切换图片就是修改img的src属性
          //要修该元素的属性 元素.属性 = 属性值
          img.src = imgArr[index];

          //当点击按钮以后，重新设置信息
          info.innerHTML =
            "一共" + imgArr.length + "张图片，当前第" + (index + 1) + "张";
        };
      };
    </script>
  </head>
  <body>
    <div id="outer">
      <p id="info"></p>

      <img src="img/1.jpg" alt="冰棍" />

      <button id="prev">上一张</button>
      <button id="next">下一张</button>
    </div>
  </body>
</html>

JavaScript-轮播图

轮播图(下一张)

1. 实现思路

2. 实现

猜你喜欢