代码:

  1. <!DOCTYPE html>
  2. <html lang="zh-Hans">
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="apple-mobile-web-app-title" content="" />
  7. <meta name="description" content="" />
  8. <meta name="author" content="" />
  9. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
  10. <link href="css/reset.css" rel="stylesheet" type="text/css" />
  11. <link rel="shortcut icon" type="image/x-icon" href="img/logo.png" />
  12. <link href="css/index.css" rel="stylesheet" type="text/css" />
  13. <script src="js/jquery.min.js"></script>
  14. <script src="js/jquery.bxslider.js" charset="gbk"></script>
  15. <link href="css/jquery.bxslider.css" rel="stylesheet" />
  16. <script type="text/javascript">
  17. $(document).ready(function () {
  18.  
  19. var vList = new Array(); // 初始化播放列表
  20. $(".pic_chapter").each(function (index, doc) {
  21. vList[index] = $(doc).attr("mp3")
  22. });
  23. var vLen = vList.length;
  24. var curr = ;
  25. $("#myvideo").attr("src", vList[curr]);
  26.  
  27. $("#myvideo").get().addEventListener('ended', function (e) {
  28. curr++;
  29. if (curr >= vLen) {
  30. curr = ;
  31. }
  32. slider.goToSlide(curr);
  33. //$("#myvideo").attr("src", vList[curr]);
  34. });
  35.  
  36. var slider = $('.slider7').bxSlider({
  37. slideWidth: ,
  38. infiniteLoop: false,
  39. hideControlOnEnd: true,
  40. slideMargin: ,
  41. auto: false,
  42. pagerType: "short",
  43. onSlideAfter: function ($slideElement, oldIndex, newIndex) {
  44. var mp3 = vList[newIndex];
  45. $("#myvideo").attr("src", mp3);
  46. },
  47. });
  48.  
  49. });
  50. </script>
  51. </head>
  52. <body style="background-color:#a4c33b;">
  53. <div class="detailcontent">
  54.  
  55. <div class="historyimg">
  56. <img src="img/b_1.png" />
  57. </div>
  58. <div class="historyright">
  59. <p class="historytitle" id="Name">大家都要打哈欠</p>
  60. <p class="historytitlep">试读年龄:-6岁</p>
  61. <p class="historytitlep">分类:习惯养成、亲子时光</p>
  62. <p class="historytitlep">作者:安妮塔·拜斯特博斯</p>
  63. </div>
  64.  
  65. <div class="details">
  66. <div><img class="imgjieshao" src="data:images/detail/pic01.png"></div>
  67. <div class="describeimg">
  68. <div class="slider7">
  69. <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>
  70. <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>
  71. <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>
  72.  
  73. </div>
  74. </div>
  75. </div>
  76.  
  77. </div>
  78. <div class="download">
  79. <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>
  80. </div>
  81. <video id="myvideo" style="display:none;" autoplay="autoplay"></video>
  82.  
  83. </body>
  84. </html>

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

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

  1. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  2. <script type="text/javascript">
  3. document.addEventListener("WeixinJSBridgeReady", function () {
  4. document.getElementById('myvideo').play();
  5. }, false);
  6. </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. Haskell语言学习笔记(79)lambda演算

    lambda演算 根据维基百科,lambda演算(英语:lambda calculus,λ-calculus)是一套从数学逻辑中发展,以变量绑定和替换的规则,来研究函数如何抽象化定义.函数如何被应用以 ...

  2. JS 打印图片

    在使用window.print()进行打印时,打印的内容可能会包含图片内容,此时的图片内容不能设置为背景图片,否则将无法再打印页面显示. <!doctype html> <html& ...

  3. Linux各种类型压缩包解压缩方法

    Linux上经常需要处理各种类型压缩包的解包和打包处理.通常来说会处理最常见的.tar包和.tar.gz包就能解决大部分问题了,但是真碰到其他类型的压缩包还是需要知道如何进行解压缩.这里对Linux上 ...

  4. 讲一讲Servlet的生命周期

    1 实例化    servlet 容器创建servlet的实例; 2初始化   该容器调用init()方法;   每个实例,init()方法只被调用一次 3 服务    如果请求Servlet,则容器 ...

  5. MySQL缓存分类和配置

    读书笔记,待补充完善 MySQL缓存分类 InnoDB缓冲池 InnoDB日志文件和MyIsAM数据的操作系统缓存 MyIsAM键缓存 查询缓存 无法手工配置的缓存,二进制日志,表定义文件的操作系统缓 ...

  6. js(鼠标键盘拖动事件)

    拖动事件是h5(HTML5的) 1:draggable(true) 2:拖动源 ondragstart ,ondragend 3:目的地 ondraglenter,ondragover,ondragl ...

  7. css样式中的绝对路径的参考对象

    如果div标签中没有position:absolute;样式,那么img的参考对象就是浏览器 如果div标签中有position:absolute;样式,那么img的参考对象就是父元素,即div标签

  8. linux下arm汇编注释符

    注意使用 @ 符 # 是整行注释符 @ 是行内注释符 以为 @ 是行内注释符,害我调试了半天.

  9. pip 离线安装

    pip download ansible -d . --trusted-host mirrors.aliyun.com pip install ansible-2.7.5.tar.gz  --user ...

  10. Java的学习02

    今天依旧记录一下今天的学习的知识. /** * 测试StringBuilder StringBuffer,可变字符序列 * String对象称为“不可变对象"指的是对象内部成员变量的值无法再 ...