微场景开发思路分析swiper的使用 音乐播放控制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="../sw/css/swiper.min.css"> <link rel="stylesheet" href="../sw/css/animate.min.css"> <link rel="stylesheet" href="../sw/css/t01.css"> <!-- Demo styles --> </head> <body> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- class都是一样的，想控制第一屏加一个class one --> <div class="swiper-slide one"> <div class="top ani" swiper-animate-effect="zoomInDown" swiper-animate-duration='1s' swiper-animate-delay="0.3s"> <img src="../sw/t09.jpg" alt="" > </div> <!-- 戒指区域开始 --> <div class="mrth"> <img src="../sw/tu/t10.jpg" alt="" class="t10"> <img src="../sw/tu/t11.jpg" alt="" class="t11 ani" swiper-animate-effect="zoomInDown" swiper-animate-duration='1s' swiper-animate-delay="0.3s"> <img src="../sw/tu/t12.jpg" alt="" class="t12"> </div> <!-- 戒指区域结束 --> <!-- 底部字 --> <div class="jrth"> <p>swiper-animate-duration 动画持续时间（单位秒）</p> </div> </div> <div class="swiper-slide">第2屏</div> <div class="swiper-slide">第3屏</div> <div class="swiper-slide">第4屏</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <!-- 自加音乐区域开始 --> <div id="music"> <img src="../sw/t06.jpg" alt="" class="t06"> <img src="../sw/t07.gif" alt="" class="t07"> <!-- audio 音频 声音 autoplay自动播放 autoplay="autoplay --> <audio src="../sw/mi/tm.mp3" preload="auto" loop="loop" class="aod " autoplay="autoplay"></audio> </div> <!-- 自加音乐区域结束 --> <!-- Swiper JS --> <script src="../sw/js/swiper.min.js"></script> <script src="../sw/js/swiper.animate.min.js"></script> <!-- Initialize Swiper --> <script src="../sw/js/t08.js"></script> <!-- <script src="../sw/js/t09.js"></script> --> </body> </html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知