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);
};
可以参考下我的作品,在老师的基础上我做了优化:
1、音乐停止与播放时图标指针变化
2、第二页倒计时显示
3、展示到第三页的时候绑定上拉下滑翻页。
github:https://github.com/ar414-com/html5cards
效果链接:https://ar414-com.github.io/html5cards/(觉得有帮助可以start一下呗)