Gitee链接

轮播图

目标：切换到对应的角色就播放相应的音频。

页面间隔固定时间会切换到下一图片，同时播放对应的音频，比如角色A 对应音频1 等。

图片左右两侧有控件用来切换图片，也就是两个单击事件和一个定时器。

轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片。这些图片统称为轮播图，这个模块叫做轮播模块。轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面，还有网易云音乐App的发现模块主页。

效果展示

样式很丑。。：

内容

主要用的image标签和 audio标签。

<body>
    <div class="main">
      <!-- 分为三块 图片  左右的控件图片 -->
      <img src="img/1.png" alt="" class="img" id="aid" />
      <img src="img/left.png" alt="" class="left" />
      <img src="img/right.png" alt="" class="right" />
      <audio
        src="music/1.mp3"
        controls="controls"
        autoplay
        hidden="true"
        class="music"
      >
        <!-- <source  type="audio/mp3"  /> -->
        <!-- 不要采用 source 添加src的内容 一方面多此一举 一方面无法通过 audio.play() 播放对应的音乐 
      audio.play() 会始终播放第一次的音乐文件 -->
      </audio>
      
    </div>
  </body>

样式

<style>
      .main {
        position: relative;
        margin: 0 auto;
        width: 800px;
        height: 600px;
        outline: 2px solid skyblue;
      }
      .img {
        /* 用来约束图片 */
        width: 100%;
      }
      div > .left {
        position: absolute;
        top: 300px;
        left: 0px;
      }
      div > .right {
        position: absolute;
        top: 300px;
        right: 0px;
      }
      audio {
        position: absolute;
        bottom: 10px;
        left: 250px;
      }
    </style>

动作

如果能直接从本地读取图片并且处理的话就更好了，这里为了方便把音频和图片进行了编号。

需要注意的是，如果使用的是谷歌浏览器，那么页面不会自动播放音频，因为Chrome将音频和视频自动播放禁止了，火狐浏览器是可以自动播放的。

<script>
    // 准备一个数组 存放本地图片的路径
    var picArr = ["1.png", "2.png", "3.png", "4.png", "5.png"];
    // 播放对应的音乐 可以使用 音乐控件  再将其隐藏  同时绑定在对应的单击事件上即可
    var musicArr = ["1.mp3", "2.mp3", "3.mp3", "4.mp3", "5.mp3"];
    var img = document.querySelector(".img");
    var leftButton = document.querySelector(".left");
    var rightButton = document.querySelector(".right");
    var audio = document.querySelector("audio");
    var idx = 0;
    var midx = 0;

    // 绑定两个按钮单击事件 和 一个 定时器
    function clickLeft() {
      var imgUrl =
        "img/" + picArr[Math.abs((--idx + picArr.length) % picArr.length)];
      img.src = imgUrl;
      var musicUrl =
        "music/" +
        musicArr[Math.abs((--midx + musicArr.length) % musicArr.length)];
      audio.src = musicUrl;
      audio.play();
    }
    leftButton.addEventListener("click", function () {
      clickLeft();
    });

    function clickRight() {
      var imgUrl = "img/" + picArr[Math.abs(++idx % picArr.length)];
      img.src = imgUrl;
      var musicUrl = "music/" + musicArr[Math.abs(++midx % musicArr.length)];
      audio.src = musicUrl;
      audio.play();
    }
    rightButton.addEventListener("click", function () {
      clickRight();
    });

    function changePic() {
      var imgUrl = "img/" + picArr[Math.abs(++idx % picArr.length)];
      img.src = imgUrl;

      var musicUrl = "music/" + musicArr[Math.abs(++midx % musicArr.length)];
      audio.src = musicUrl;
      audio.play();
    }
    setInterval(changePic, 3000);

   
  </script>