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. JavaScript 入门笔记

    JavaScript   1.JS和DOM的关系 浏览器有渲染html代码的功能,把html源码在内存里形成一个DOM对象,就是文档对象 浏览器内部有一个JS的解释器/执行/引擎,如chrome用v8 ...

  2. 『TensorFlow』分布式训练_其一_逻辑梳理

    1,PS-worker架构 将模型维护和训练计算解耦合,将模型训练分为两个作业(job): 模型相关作业,模型参数存储.分发.汇总.更新,有由PS执行 训练相关作业,包含推理计算.梯度计算(正向/反向 ...

  3. shiro中拦截器机制

    8.1 拦截器介绍 Shiro使用了与Servlet一样的Filter接口进行扩展:所以如果对Filter不熟悉可以参考<Servlet3.1规范>http://www.iteye.com ...

  4. ubuntu server 启用mysql日志

    1.要启动mysql日志,你就要找到mysql 核心的文件my.cnf  (路径:/etc/mysql) 在命令窗口输入:cd /etc/mysql 在命令窗口输入:ls 你就可以看到my.cnf文件 ...

  5. dubbo 负载均衡

    在系统中可以启动多个 provider 实例,consumer 发起远程调用时,根据指定的负载均衡算法选择一个 provider. 在本机配置多个 provider,使用不同的端口: <dubb ...

  6. 如何利用redis key过期事件实现过期提醒

    https://blog.csdn.net/zhu_tianwei/article/details/80169900 redis自2.8.0之后版本提供Keyspace Notifications功能 ...

  7. 一篇文章有若干行，以空行作为输入结束的条件。统计一篇文章中单词the(不管大小写，单词the是由空格隔开的)的个数。

    #include <iostream>using namespace std; int k = 0;int n = 0;int main() { char c; char a[1000]; ...

  8. git merge branch

    git branch   look at your branches git branch newbranch git checkout newbrach do something git check ...

  9. Java Web(九) JDBC及数据库连接池及DBCP，c3p0，dbutils的使用

    DBCP.C3P0.DBUtils的jar包和配置文件(百度云盘):点我下载 JDBC JDBC(Java 数据库连接,Java Database Connectify)是标准的Java访问数据库的A ...

  10. pycharm(Tip of Day)

    You can easily override the methos of the base class by press Ctrl + 0 ( code | override methods) Yo ...