微场景开发思路分析swiper的使用 音乐播放控制

时间:4年前   阅读:6972

<!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,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:处理Gitlab升级时的错误

下一篇:PHP自定义错误处理函数

网友评论

请先 登录 再评论,若不是会员请先 注册