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;

     }