1.横向滚动条,要设置两个div包裹. 2. 点击切换视频或者图片. overflow . overflow-x
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的更多相关文章
- 设置两个div是总是不能重合,浏览器user agent stylesheet问题
如图 两个div之间总是有一个空行,设置了margin为0还是没卵用,f12调试发现 多了一个user agent stylesheet样式,经百度是浏览器自带的样式 重新为div内的元素ul设置cs ...
- 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边
先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示 ...
- css实现内容不相同的左右两个div等高
问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元 ...
- DataTables固定表格宽度（设置横向滚动条）
当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...
- 如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
- 两个div横向排列，顶端对齐的方式。
1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!DOCTYPE html PUBLIC "-//W3C/ ...
- Jquery使两个Div的滚动条同步滚动
$("#div").scroll(function(){ $("#div1").scrollTop($(this).scrollTop()); // 纵向滚动条 ...
- HTML+CSS-如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
- datatable无法设置横向滚动条(设置无效)
datatable设置横向滚动条无效 js如下: 页面如下: 设置 scrollx 属性为true时,还需在 table 添加 style="white-space: nowrap; &qu ...
随机推荐
- linux搭建DHCP
动态主机配置协议(DHCP,Dynamic Host Configuration Protocol),该协议用于自动管理局域网内主机的IP地址.子网掩码.网关地址及DNS地址等参数,可以有效地提升IP ...
- Python操作excel的几种方式--xlrd、xlwt、openpyxl
openpyxl xlrd xlwt 在处理excel数据时发现了xlwt的局限性–不能写入超过65535行.256列的数据(因为它只支持Excel 2003及之前的版本,在这些版本的Excel中 ...
- SQL SERVER 字符拆分列为多行
注:先学习sql server里的递归CTE. 假设有兴趣表Hobbys Name Hobby 小张 篮球,足球,羽毛球 Name Hobby 小张 篮球 小张 足球 小张 羽毛球 采用[递归cte] ...
- python记录_day11 闭包 迭代器
一.第一类对象: 函数名是一个变量,可以当普通变量使用,但它又是一个特殊的变量,与括号配合可以执行函数. 函数名的运用 1.单独打印是一个内存地址 2.可以给其他变量赋值 3.可以作为容器类变量的元素 ...
- 第二阶段——个人工作总结DAY05
1.昨天做了什么:将值由一个活动传递到另一个活动. 2.今天打算做什么:打算制作修改密码的界面. 3.遇到的困难:因为是任务是分开的,所需要获取的值是通过另一个活动(不是自己任务)的传递过来的,所以还 ...
- 第二阶段——个人工作总结DAY02
1.昨天做了什么:昨天学习了Intent跳转的知识. 2.今天打算做什么:来实现这个功能. 3.遇到的困难:不会用隐式跳转,只会用显式跳转.
- 关于js原型链
关于原型链,我们先贴上一张图(来自某知乎大佬专栏),然后听我娓娓道来. 先来说说什么是原型? JavaScript 中的对象有一个特殊的 [[Prototype]] 内置属性,其实就是对于其他对象的引 ...
- git回退代码到某次commit
回退命令: $ git reset --hard HEAD^ 回退到上个版本 $ git reset --hard HEAD~3 回退到前3次提交之前,以此类推,回退到n次提交之前 $ git res ...
- 动态BT跳转
METHOD eh_onzobject_id_link. ***定义 DATA : lv_crmt_object_guid TYPE crmt_object_guid, lv_index TYPE i ...
- Utils--前台调用后台接口工具类
Utils--前台调用后台接口工具类 package com.taotao.manage.httpclient; import java.io.IOException; import java.net ...