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 ...
随机推荐
- vue.js手机号验证是否正确
{literal} var mobile_mode=/^1[34578]\d{9}$/; {/literal} if(!mobile_mode.test(te ...
- react-native run-ios时报错xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
命令行运行react-native 项目时,报错:xcrun: error: unable to find utility "instruments", not a develop ...
- 在react+redux+axios项目中使用async/await
Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...
- PY3 多组输入
在c语言你能使用while(scanf(“%d”,x) !=EOF)判断输入是否碰到文件结束符(EOF). 但是在python你不能使用while((x=input())!=EOF). 这有两种方法可 ...
- visio画等分树状图
一 树状图形状 Search里搜索Tree,找到Double Tree或者Multi Tree的形状 二 分出更多branch 按住主干上的黄色小方块,拖出更多分支. 三 等分分支 将每个分支和对应的 ...
- maven中 install的install:install的区别
如果一个项目,你想安装jar包到本地仓库,可能会报The packaging for this project did not assign a file to the build artifact ...
- Node+Express的跨域访问控制问题：Access-Control-Allow-Origin
问题一:项目A通过Ajax访问项目B的接口,获取json数据,项目B采用Node+Express技术栈.项目A可能遇到跨域访问控制问题. 问题二:vue-resource 能够跨域,一般使用jsonp ...
- Python print打印
1.Python运算符: +:加 -:减 *:乘 /:除以 %:去除法后的余数 //:取整除 2.字符串center方法: a='111'print(a.center(4,'2')) #让字符串占位 ...
- Windows和Linux创建软链接和硬链接
1.Wondows创建软链接和硬链接 mklink [/d] [/h] link target /d--创建目录软链接:默认为文件软链接:创建目录链接时必须使用该选项不然创出的软链接无效 /h--创建 ...
- telnet的装配及xinetd的讨论
telnet由于是不安全的明文传输所以基本被ssh取代了,尤其是在Linux上:不过还是可能会用到,且启停方式还有些不同所以还是有必要说明一下. rpm -qa | grep telnet #查看是否 ...