音樂(lè)圖標(biāo)單擊停止和點(diǎn)擊換頁(yè)的效果出不來(lái)
window.onload=function(){
var page1=document.getElementById("page1");
var page2=document.getElementById("page2");
var page3=document.getElementById("page3");
var music = document.getElementsByClassName("music");
var audio = document.getElementsByTagName("audio")[0];
music.addEventListener("touchstart",function(event){
if(audio.paused){
audio.play();
this.setAttribute("class,","play");
//this.style.animationPlayState = "running";
}else{
audio.pause();
this.setAttribute("class","");
//this.style.animationPlayState = "pasued";
};
},false);
page1.addEventListener("touchstart",function(event){
page1.style.display="none";
page2.style.display="block";
page3.style.display="block";
page3.style.top="100%";
setTimeout(function(){
page2.setAttribute("class","page fadeOut");
page3.setAttribute("class","page fadeIn");
},5500);
},false);
};
2020-02-09
可以參考下我的作品,在老師的基礎(chǔ)上我做了優(yōu)化:
1、音樂(lè)停止與播放時(shí)圖標(biāo)指針變化
?2、第二頁(yè)倒計(jì)時(shí)顯示
?3、展示到第三頁(yè)的時(shí)候綁定上拉下滑翻頁(yè)。
github:https://github.com/ar414-com/html5cards?
效果鏈接:https://ar414-com.github.io/html5cards/(覺(jué)得有幫助可以start一下唄)