音乐播放结束后Swiper在切换下一页面
上HTML代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="js/swiper-5.4.5/package/css/swiper.min.css" />
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="page swiper-pagination"></div>
</div>
</div>
</body>
</html>
js代码
```html
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper-5.4.5/package/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let pages=['https://www.w3school.com.cn//i/song.mp3',
"http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3",
"http://downsc.chinaz.net/files/download/sound1/201206/1638.mp3"
];
pages.forEach((item,index)=>{
var data =`<div class="swiper-slide" data-swiper-autoplay="0">
slider${index}
<audio id="${index}" src="${item}"></audio>
</div>`
$('.swiper-wrapper').append(data);
})
var mySwiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay:false,//禁止自动播放
on:{
init: function(){
let pageindex=this.activeIndex;
let page=$('.swiper-slide')[pageindex];
let audio_id=parseInt($(page).find("audio")[0].id);
$('audio')[audio_id].play();
played.call(this,audio_id);//调用音乐播放结束监听方法
},
slideChange: function(e) {
if(this.autoplay.running){
//开启了自动播放
this.autoplay.stop();
}
this.autoplay.stop();
let pageindex=this.activeIndex;
let page=$('.swiper-slide')[pageindex];
let audio_id=parseInt($(page).find("audio")[0].id);
if(audio_id==0){
$('audio')[2].pause();//销毁
$('audio')[audio_id].play();
}else{
$('audio')[audio_id-1].pause();//销毁
$('audio')[audio_id].play();
};
played.call(this,audio_id);//调用音乐播放结束监听方法
},
}
});
// 音乐播放结束监听
function played(audio_id){
$('audio')[audio_id].addEventListener('ended',()=>{
console.log('播放结束');
this.autoplay.start();
})
}
</script>
总结：主要思路是，swiper初始化时候，播放第一屏音乐。并且autoplay设置为false，禁止自动切屏；当第一屏页面音乐播放结束后（监听音乐结束addEventListener(‘ended’,()=>{})），开启autoplay为true，启动自动切屏。然后根据slideChange监听切屏，切完之后再次禁止自动切屏autoplay为false。有不对的地方，感觉大家指正。
1913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
