1.横向滚动条.

div.1 > div.2 > img img  img

第一: 设置 div.1 一个固定的宽度 和高度  . 例如宽度 700px;  高度是 120px; 设置 overflow-x

第二; 每个图片的 宽度是 150px, 高度 100px( 比 div.1 小, 要可以显示横向滚动条

第三: 重点 . 设置 div.2 的宽度 .  如果有 10个图片, 每个图片margin-right 为 10px,   那么 div.2 的宽度就是  (150+10)*10

　　这里要考虑 inline-box 的元素之间有间隙. 可以设置  div.2 的font-size 为 0px;  img 的font-size 为 16px;

参考样式:

      .kecheng_03_content {

          width: 100%;

          height: 120px;

          overflow-x: auto;

          /*border: 1px solid red;*/

          margin-top: 20px;

      }

      .kecheng_03_content .xuan {

          width: 750px;

          font-size: 0px;

          -webkit-text-size-adjust:none;

      }

      .kecheng_03_content .xuan div {

          width: 120px;

          height: 90px;

          display: inline-block;

          margin-right: 20px;

          box-shadow: 0px 0px 2px 2px #DBDBDB;

      }

      .kecheng_03_content .xuan div video {

          width: 120px;

          height: 90px;

      }

      .kecheng_03_content .xuan div img {

          width: 120px;

          height: 90px;

      }

2. 点击切换视频或者图片.

要求:

1)点击下面滚动条中的图片, 图片对应的视频可以切换;

2)也可以 直接点击 perv 或者 next 切换视频.

---------------------------

保证视频 和图片 都是 这样的命名方法:  1.mp4 , 2.mp4, 3.mp4, 4.mp4, 5.mp4;       1.png,   2.png ,   3.png ,   4.png ,  5.png

---------------------------

2-1:  html结构:

     <div class="kecheng_03">

         <div class="kecheng_03_video" >

             <video  controls preload="none">

               <source src="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/1.mp4';  ?>" type="video/mp4">

             </video>

         </div>

         <div class="kecheng_03_button" data-num="1" data-totalnum="5" data-subsrc="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/';  ?>">

             <div  onclick="jumpButton('prev', this)" class="kecheng_03_button_left button2" style="width: 50px; margin-left: 120px;">prev</div>

             <div  onclick="jumpButton('next', this)" class="kecheng_03_button_right button2" style="width: 50px; margin-left: 290px;">next</div>

         </div>

         <div class="kecheng_03_content">

             <div class="xuan">

                 <div data-num="1" onclick="jumpContent(this)">

                     <img data-videosrc="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/1.mp4';  ?>" src="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/1.png';  ?>">

                 </div>

                 <div data-num="2" onclick="jumpContent(this)">

                     <img data-videosrc="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/2.mp4';  ?>" src="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/2.png';  ?>">

                 </div>

                 <div data-num="3" onclick="jumpContent(this)">

                     <img data-videosrc="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/3.mp4';  ?>" src="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/3.png';  ?>">

                 </div>

                 <div data-num="4" onclick="jumpContent(this)">

                     <img data-videosrc="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/4.mp4';  ?>" src="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/4.png';  ?>">

                 </div>

                 <div data-num="5" onclick="jumpContent(this)">

                     <img data-videosrc="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/5.mp4';  ?>" src="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/5.png';  ?>">

                 </div>

             </div>

         </div>

     </div>

第9行: 设置了 data-num="1" data-totalnum="5" data-subsrc="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/'; ?>"

data-num 当前的播放的是第一个视频,        data-totalnum 总共视频是 5个.    data-subsrc 视频存放的上级地址.     视频播放地址 =  data-subsrc + 1.mp4

第 16- 18行:

                  <div data-num="1" onclick="jumpContent(this)">

17                     <img data-videosrc="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/1.mp4';  ?>" src="<?php echo PROJECT . 'Application/View/Home/Course/dzsk/video/1.png';  ?>">

18                 </div>

data-num 表示点击这个图片,对应的视频是 1.mp4

data-videoserc 表示的这个图片对应的视频地址.

2-2: 上一个,下一个对应的js 函数.

           /**

      * [jumpButton 点击上下按钮切换视频]

      * @param  {[type]} dirc [description]

      * @param  {[type]} node [description]

      * @return {[type]}      [description]

      */

     function jumpButton(dirc, node)

     {

         // alert('11111');

         if (dirc == 'prev') {

             // alert('2222');

             //总的视频数:

             var totalnum = Number($(node).parents('.kecheng_03_button').attr('data-totalnum'));

             // console.log('totalnum', totalnum);

             // console.log(typeof totalnum);

             //视频地址:

             var subsrc = $(node).parents('.kecheng_03_button').attr('data-subsrc');

             //当前地址:

             var nownum = Number($(node).parents('.kecheng_03_button').attr('data-num'));

             if (nownum == 1) {

                 var nextnum = 1;

             } else{

                 var nextnum = nownum - 1;

             };

             //添加html:

             $(".kecheng_03_video").remove();

             $(".kecheng_03_button").remove();

             var str = '';

             str +=     '<div class="kecheng_03_video">'

                 +        '<video  controls preload="none">'

                 +          '<source src="' +subsrc+nextnum+'.mp4" type="video/mp4">'

                 +        '</video>'

                 +    '</div>'

                 +    '<div class="kecheng_03_button" data-num="' +nextnum+ '" data-totalnum="' +totalnum+ '" data-subsrc="' +subsrc+ '">'

                 +        '<div  onclick="jumpButton(\'prev\',this)" class="kecheng_03_button_left button2" style="width: 50px; margin-left: 120px;">prev</div>'

                 +        '<div  onclick="jumpButton(\'next\',this)" class="kecheng_03_button_right button2" style="width: 50px; margin-left: 290px;">next</div>'

                 +    '</div>';

             $(".kecheng_03_content").before(str);

         }

         if (dirc == 'next') {

             //总的视频数:

             var totalnum = Number($(node).parents('.kecheng_03_button').attr('data-totalnum'));

             // console.log('totalnum', totalnum);

             // console.log(typeof totalnum);

             //视频地址:

             var subsrc = $(node).parents('.kecheng_03_button').attr('data-subsrc');

             //当前地址:

             var nownum = Number($(node).parents('.kecheng_03_button').attr('data-num'));

             if (nownum == totalnum) {

                 var nextnum = totalnum;

             } else{

                 var nextnum = nownum + 1;

             };

             //添加html:

             $(".kecheng_03_video").remove();

             $(".kecheng_03_button").remove();

             var str = '';

             str +=     '<div class="kecheng_03_video">'

                 +        '<video  controls preload="none">'

                 +          '<source src="' +subsrc+nextnum+'.mp4" type="video/mp4">'

                 +        '</video>'

                 +    '</div>'

                 +    '<div class="kecheng_03_button" data-num="' +nextnum+ '" data-totalnum="' +totalnum+ '" data-subsrc="' +subsrc+ '">'

                 +        '<div  onclick="jumpButton(\'prev\',this)" class="kecheng_03_button_left button2" style="width: 50px; margin-left: 120px;">prev</div>'

                 +        '<div  onclick="jumpButton(\'next\',this)" class="kecheng_03_button_right button2" style="width: 50px; margin-left: 290px;">next</div>'

                 +    '</div>';

             $(".kecheng_03_content").before(str);

         };

     }

2.3 滚动条中的图片点击触发的函数.

         /**

      * [jumpContent 滚动条选择视频]

      * @param  {[type]} node [description]

      * @return {[type]}      [description]

      */

     function jumpContent(node)

     {

         //当前点击的视频:

         var nownum = Number($(node).attr("data-num"));

         //视频的地址:

         // var src = $(node).find('source').attr("src");

         var src = $(node).find('img').attr("data-videosrc");

         //视频总数:

         var totalnum = $('.kecheng_03_button').attr('data-totalnum');

         //sub地址:

         var subsrc = $('.kecheng_03_button').attr('data-subsrc');

         //添加html:

         $(".kecheng_03_video").remove();

         $(".kecheng_03_button").remove();

         var str = '';

         str +=     '<div class="kecheng_03_video">'

             +        '<video  controls preload="none">'

             +          '<source src="' +src+ '" type="video/mp4">'

             +        '</video>'

             +    '</div>'

             +    '<div class="kecheng_03_button" data-num="' +nownum+ '" data-totalnum="' +totalnum+ '" data-subsrc="' +subsrc+ '">'

             +        '<div  onclick="jumpButton(\'prev\',this)" class="kecheng_03_button_left button2" style="width: 50px; margin-left: 120px;">prev</div>'

             +        '<div  onclick="jumpButton(\'next\',this)" class="kecheng_03_button_right button2" style="width: 50px; margin-left: 290px;">next</div>'

             +    '</div>';

         $(".kecheng_03_content").before(str);

     }

所用的样式:

      /* ********课程 03************************** */

      .kecheng_03 {

          margin: 40px;

          margin-top: 0px;

          /*border: 1px solid red;*/

      }

      .kecheng_03_video {

          width: 95%;

          /*height: 300px;*/

          margin: 0px auto;

      }

      .kecheng_03_video video {

          /*width: 400px;*/

          /*height: 300px;*/

          width: 100%;

      }

      .kecheng_03_content {

          width: 100%;

          height: 120px;

          overflow-x: auto;

          /*border: 1px solid red;*/

          margin-top: 20px;

      }

      .kecheng_03_content .xuan {

          width: 750px;

          font-size: 0px;

          -webkit-text-size-adjust:none;

      }

      .kecheng_03_content .xuan div {

          width: 120px;

          height: 90px;

          display: inline-block;

          margin-right: 20px;

          box-shadow: 0px 0px 2px 2px #DBDBDB;

      }

      .kecheng_03_content .xuan div video {

          width: 120px;

          height: 90px;

      }

      .kecheng_03_content .xuan div img {

          width: 120px;

          height: 90px;

      }
     .button2 {

         background-color: #2A71A9;

         height: 30px;

         display: inline-block;

         font-size: 16px;

         font-weight:;

         color: #fff;

         line-height: 30px;

         text-align: center;

         border-radius: 4px;

         margin-top: 10px;

         margin-right: 10px;

         padding: 0px 10px;

         cursor: pointer;

     }

1.横向滚动条,要设置两个div包裹. 2. 点击切换视频或者图片. overflow . overflow-x的更多相关文章

  1. 设置两个div是总是不能重合,浏览器user agent stylesheet问题

    如图 两个div之间总是有一个空行,设置了margin为0还是没卵用,f12调试发现 多了一个user agent stylesheet样式,经百度是浏览器自带的样式 重新为div内的元素ul设置cs ...

  2. 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边

    先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示 ...

  3. css实现内容不相同的左右两个div等高

    问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元 ...

  4. DataTables固定表格宽度（设置横向滚动条）

    当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...

  5. 如何定义让两个div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  6. 两个div横向排列，顶端对齐的方式。

    1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!DOCTYPE html PUBLIC "-//W3C/ ...

  7. Jquery使两个Div的滚动条同步滚动

    $("#div").scroll(function(){ $("#div1").scrollTop($(this).scrollTop()); // 纵向滚动条 ...

  8. HTML+CSS-如何定义让两个div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  9. datatable无法设置横向滚动条(设置无效)

    datatable设置横向滚动条无效 js如下: 页面如下: 设置 scrollx 属性为true时,还需在 table 添加 style="white-space: nowrap; &qu ...

随机推荐

  1. AutoMatic merge failed；fix conflicts and then commit the result.解决方法

    意思是: 冲突内容:合并冲突在 XXXX.DS_Store文件中 自动合并失败:修改冲突然后提交修改后的结果. <<<<<<<< HEAD 你写的代码 ...

  2. apache2反向代理

    1.安装 Apache2 sudo apt-get install apache2 2.重启服务器 sudo /etc/init.d/apache2 restart 3.虚拟主机配置 启用这几个模块 ...

  3. VMware（虚拟机） 12版安装深度linux系统

    需要的工具: 1.VM ware workstation12虚拟机(可自行百度下载)  参考:VMware Workstation 12.5.5 官方中文正式版,下载地址:http://www.epi ...

  4. java集合类整理

    LinkedList 优点:插入删除迅速 缺点:不适合随机访问 List<String> staff = new LinkedList<String>(); staff.add ...

  5. C# 4.0 可选参数 和 命名参数

    可选参数 可选参数是 C# 4.0 提出来的,当我们调用方法,不给这个参数(可选参数)赋值时,它会使用我们定义的默认值. 需要注意的是: (1)可选参数必须位于所有必选参数的后面: (2)可选参数必须 ...

  6. [转载]Python使用@property装饰器--getter和setter方法变成属性

    原贴:为什么Python不需要getter和setter getter 和 setter在java中被广泛使用.一个好的java编程准则为:将所有属性设置为私有的,同时为属性写getter和sette ...

  7. Linux查看某个命令属于哪个包

    有时修我们需要某个命令但其没有安装,提供该命令的包名也与命令名相差很大直接查找命令名找不到包,如rexec. 此时我们就非常需要这样一个工具:可以根据最终的命令查找提供该命令的软件包. 类型 命令 说 ...

  8. [转]java异常中Exception捕获不到的异常

    一 概念 众所周知java提供了丰富的异常类,这些异常类之间有严格的集成关系,分类为 父类Throwable Throwable的两个子类Error和Exception Exception的两个子类C ...

  9. qt窗口最小化之后无法打开

    转自: https://blog.csdn.net/qiangzi4646/article/details/79743604 http://www.cnblogs.com/lingdhox/p/331 ...

  10. 小程序证书申请FAQ

    1. 帮别人开发小程序, 先把你的微信号加到成员里, 并给予开发者权限,体验者权限,登录,数据分析,开发管理,开发设置 2. 需要https, 不能用windows2003,必须2008以上,用IIS ...