这篇文章主要为大家分享了js微信应用场景之微信音乐相册案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
这个demo只是一个js微信音乐相册案例大概思路，具体还需要根据情况来进行
Document <ｓｃｒｉｐｔ charset='utf-8' src='swiper.min.js'> <ｓｃｒｉｐｔ> //rem ~function(){ var desW = 640, winW = document.documentElement.clientWidth, ratio = winW / desW, oMain = document.querySelector(".main"); if(winW>desW){ oMain.style.margin = "0 auto"; oMain.style.width = desW + 'px'; return; } document.documentElement.style.fontSize = ratio*100+"px"; }() new Swiper('.swiper-container',{ direction:"vertical", loop:true, onSlideChangeEnd:function(swiper){ var slideAry = swiper.slides;//获取当前一共有多少个活动快（包含loop模式前后多加的两个） var curIn = swiper.activeIndex;//当前展示的这个区域的索引 var total = slideAry.length; //计算ID是PAGE? var targetId = 'page'; switch(curIn){ case 0: targetId += total - 2; break; case total - 1: targetId += 1; break; default: targetId += curIn } //给当前的活动块设置ID即可,还要把其余的移除 [].forEach.call(slideAry,function(item,index){ if(curIn === index){ item.id = targetId; return; } item.id = null; }) slideAry[curIn].id = targetId; //最后把animate.css里面的动画to里面添加opacity:1 } }) //MUSIC ~function(){ var musicMenu = document.getElementById('musicMenu'), musicAudio = document.getElementById('musicAudio'); musicMenu.addEventListener('click',function(){ if(musicAudio.paused){ musicAudio.play(); musicMenu.className = "music move"; return; } musicAudio.pause(); musicMenu.className = "music"; }) function controlMusic(){ musicAudio.volume = 0.1; musicAudio.play(); musicAudio.addEventListener('canplay',function(){ musicMenu.style.display = "block"; musicMenu.className = "music move"; }) } window.setTimeout(controlMusic,1000) }()
