目录
轮播图
目标：切换到对应的角色就播放相应的音频。
页面间隔固定时间会切换到下一图片，同时播放对应的音频，比如角色A 对应 音频1 等。
图片左右两侧有控件用来切换图片，也就是两个单击事件和一个定时器。
扫描二维码关注公众号，回复：
14721444 查看本文章
轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片。这些图片统称为轮播图，这个模块叫做轮播模块。轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面，还有网易云音乐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>