（IOS可自动播放）使用bxslider做了一个切换图片跟随播放MP3的功能

最新推荐文章于 2024-05-11 14:10:02 发布

weixin_30938149

最新推荐文章于 2024-05-11 14:10:02 发布

阅读量212

点赞数

文章标签： javascript 人工智能 ViewUI

原文链接：http://www.cnblogs.com/xsj1989/p/8520643.html

版权

代码：

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="apple-mobile-web-app-title" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" type="image/x-icon" href="img/logo.png" />
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.bxslider.js" charset="gbk"></script>
    <link href="css/jquery.bxslider.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {

            var vList = new Array(); // 初始化播放列表
            $(".pic_chapter").each(function (index, doc) {
                vList[index] = $(doc).attr("mp3")
            });
            var vLen = vList.length;
            var curr = 0;
            $("#myvideo").attr("src", vList[curr]);

            $("#myvideo").get(0).addEventListener('ended', function (e) {
                curr++;
                if (curr >= vLen) {
                    curr = 0;
                }
                slider.goToSlide(curr);
                //$("#myvideo").attr("src", vList[curr]);
            });

            var slider = $('.slider7').bxSlider({
                slideWidth: 500,
                infiniteLoop: false,
                hideControlOnEnd: true,
                slideMargin: 10,
                auto: false,
                pagerType: "short",
                onSlideAfter: function ($slideElement, oldIndex, newIndex) {
                    var mp3 = vList[newIndex];
                    $("#myvideo").attr("src", mp3);
                },
            });
            
        });
    </script>
</head>
<body style="background-color:#a4c33b;">
    <div class="detailcontent">

        <div class="historyimg">
            <img src="img/b_1.png" />
        </div>
        <div class="historyright">
            <p class="historytitle" id="Name">大家都要打哈欠</p>
            <p class="historytitlep">试读年龄：3-6岁</p>
            <p class="historytitlep">分类：习惯养成、亲子时光</p>
            <p class="historytitlep">作者：安妮塔·拜斯特博斯</p>
        </div>

        <div class="details">
            <div><img class="imgjieshao" src="images/detail/pic01.png"></div>
            <div class="describeimg">
                <div class="slider7">
                    <div class="slide"><img class="pic_chapter" src="http://cdn-tudo-share.imtudo.com/PicBookChapterInfo/743177cb70b89f392c821b8b8c7bc881.png" mp3="http://cdn-tudo-audios.imtudo.com/PicBookChapterInfo/7e003483fbe5a52877ec94f252654de8.mp3"></div>
                    <div class="slide"><img class="pic_chapter" src="http://cdn-tudo-share.imtudo.com/PicBookChapterInfo/b3def542a53377a7afada831d4f92eed.png" mp3="http://cdn-tudo-audios.imtudo.com/PicBookChapterInfo/d82419c568df5abd6687da19d1bf1f3e.mp3"></div>
                    <div class="slide"><img class="pic_chapter" src="http://cdn-tudo-share.imtudo.com/PicBookChapterInfo/6a8c9ea864800c21b247fd0d89254459.png" mp3="http://cdn-tudo-audios.imtudo.com/PicBookChapterInfo/b87f44b77f65dabc7d9815cf8a5130ff.mp3"></div>

                </div>
            </div>
        </div>

    </div>
    <div class="download">
        <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.tudou.bmb&g_f=991653"> <img class="logoimg" src="images/detail/share.png" /></a>
    </div>
    <video id="myvideo" style="display:none;" autoplay="autoplay"></video>

</body>
</html>

页面代码我直接copy过来的。有需要的请自己精简一下。bxslider轮播api文档：http://www.uedsc.com/jquery-bxslider-api.html

注意：这个网页在IOS系统上面不能播放，IOS有防止浪费用户流量的限制，禁止自动播放。还好微信出了个js脚本。

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        document.addEventListener("WeixinJSBridgeReady", function () {
            document.getElementById('myvideo').play();
        }, false);
    </script>