代码：

<!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 = ;

            $("#myvideo").attr("src", vList[curr]);

            $("#myvideo").get().addEventListener('ended', function (e) {

                curr++;

                if (curr >= vLen) {

                    curr = ;

                }

                slider.goToSlide(curr);

                //$("#myvideo").attr("src", vList[curr]);

            });

            var slider = $('.slider7').bxSlider({

                slideWidth: ,

                infiniteLoop: false,

                hideControlOnEnd: true,

                slideMargin: ,

                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">试读年龄：-6岁</p>

            <p class="historytitlep">分类：习惯养成、亲子时光</p>

            <p class="historytitlep">作者：安妮塔·拜斯特博斯</p>

        </div>

        <div class="details">

            <div><img class="imgjieshao" src="data: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="data: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>

加上这个代码就可以播放了。参考文章：https://www.cnblogs.com/xiongdahei/p/7144700.html

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

  1. iOS 本地自动打包工具

    1.为什么要自动打包工具? 每修改一个问题,测试都让你打包一个上传fir , 你要clean -> 编译打包 -> 上传fir -> 通知测试.而且打包速度好慢,太浪费时间了.如果有 ...

  2. iOS 实现后台 播放音乐声音 AVAudioPlayer 以及铃声设置（循环播放震动）

    1.步骤一:在Info.plist中,添加"Required background modes"键,value为:App plays audio 或者: 步骤二: - (BOOL) ...

  3. iOS 关于自动更新的分阶段发布(灰度发布)的相关简介

    前言:  AppStore 发布应用方式除了自动和手动,如今添加了分阶段发布(灰度发布).目的很明确,降低新版本骤然上升的bug率,不能挽回,只能发布新版本的风险.也也是针对禁止使用热修复,推出的相对 ...

  4. 【iOS系列】-UIScrollView的介绍及结合UIPageControl实现图片播放的实例

    [iOS系列]-UIScrollView的介绍及结合UIPageControl实现图片播放的实例 第一:UIScrollView的常用属性 //表示UIScrollView内容的尺寸,滚动范围 @pr ...

  5. IOS（苹果手机）使用video播放HLS流，实现在内部播放及全屏播放（即非全屏和全屏播放）。

    需求: 实现PC及移动端播放HLS流,并且可以自动播放,在页面内部播放及全屏播放功能. 初步:PC及安卓机使用hls.js实现hls流自动播放及全屏非全屏播放 首先使用了hls.js插件,可以实现在P ...

  6. 做了一个简易的git 代码自动部署脚本

    做了一个简易的git 代码自动部署脚本 http://my.oschina.net/caomenglong/blog/472665 发表于2个月前(2015-06-30 21:08)   阅读(200 ...

  7. iOS微信自动抢红包插件(支持后台和锁屏下抢红包)

    前言:本文主要讲述使用hook方式实现红包插件,涉及到tweak相关知识,如果你不想了解具体实现细节可直接到我的Github地址参考安装(包含越狱和非越狱两种方法)   转眼间2017即将过去,又到了 ...

  8. JavaScript一个页面中有多个audio标签，其中一个播放结束后自动播放下一个，audio连续播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. IOS无限自动循环滚动banner(源码)

    本文转载至 http://blog.csdn.net/iunion/article/details/19080259  目前有很多APP都开始使用一些滚动banner,我自己也做了一个,部分算法没有深 ...

随机推荐

  1. 基于ajax请求异常捕获

    第一步:controller中 @RequestMapping("/ajaxerror") public String ajaxerror() { return "thy ...

  2. java axis2 webservice

    http://clq9761.iteye.com/blog/976029/ 这篇文章写的是最全的,也是最好的.无须下一步下一步操作来操作去,写类直接调试,非常好!

  3. SQL Server 2008读取域帐户信息

    参考:http://www.pawlowski.cz/2011/04/querying-active-directory-sql-server-t-sql/ 1.建立  link server . u ...

  4. 学JS的心路历程-函式（六）其余参数及预设参数

    今天我们要来介绍ES6新增的其余参数及预设参数! 其余参数rest parameter …numbers可以让我们表示不确定数量的参数,并将其视为一个数组: function getVal(…numb ...

  5. yii 定义场景

    定义场景可以限制对字段的增删改查操作

  6. linux 设备驱动分类

    1. 字符设备 :在I/O传输过程中以字符为单位. 2. 块设备: 在传输过程中以块为单位,相关概念有 缓冲,I/O调度,请求队列.主要体现出与字符设备在操作硬件的接口实现方式上是不一样的. 3. 网 ...

  7. hibernate 性能问题

    hibernate的目标是快速开发,数据库数据转换为java对象,业务逻辑中只使用对象进行处理. 性能开销有: 数据-对象转换时间,状态记录(是否为脏数据),sql优化(默认是对表字段全部更新,增加网 ...

  8. sass 使用clac的问题

    最后在github的issue中找到了方法,要想在sass的calc中使用变量,必须对这个变量使用sass的插值方法(#{$variable}). 所以把代码改正下面的形式就可以了: width: c ...

  9. QPS/TPS/并发量/系统吞吐量的概念

    我们在日常工作中经常会听到QPS/TPS这些名词,也会经常被别人问起说你的系统吞吐量有多大.这个问题从业务上来讲,可以理解为应用系统每秒钟最大能接受的用户访问量.或者每秒钟最大能处理的请求数: QPS ...

  10. 《java与模式》阅读笔记01

    这次我读了前两章的内容,就如书名所言,这本书主要将的就是java中的模式,在书中的序言就把所有的模式都介绍了一下,主要有, 1.创建模式:简单工厂模式,工厂方法模式,抽象工厂模式,建造模式 2.行为模 ...