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 ...
随机推荐
- Tree Requests CodeForces - 570D (dfs水题)
大意: 给定树, 每个节点有一个字母, 每次询问子树$x$内, 所有深度为$h$的结点是否能重排后构成回文. 直接暴力对每个高度建一棵线段树, 查询的时候相当于求子树内异或和, 复杂度$O((n+m) ...
- 两个约束下的dp问题
洛谷P1510 分析:本质上还是一个01背包,将体力当做重量,体积当做价值.配上滚动数组 即dp[j]代表在体力耗费为j时最大能搬运多少体积的石头,当dp[j]>v时就说明存在满足情况的解,这样 ...
- 迷宫最短路径问题的dfs,bfs实现
迷宫的最短路径 给定一个大小为 N×M的迷宫.迷宫由通道和墙壁组成,每一步可以向邻接的上下左右四格的通道移动.请求出从起点到终点所需的小步数.请注意,本题假定从起点一定可以移动到终点 限制条件:N,M ...
- element upload 一次性上传多张图片(包含自定义上传不走action)
最重要的都圈出来了
- oracle数据库静态监听配置示例
[oracle@Oracle11g admin]$ cat listener.ora SID_LIST_LISTENER = (SID_LIST = (SID_DESC = (GLOB ...
- CRM 价格批导2<上一个太多冗余>
INCLUDE:LCRM_MKTPL_COND_IFF39 *--------------------------------------------------------------------- ...
- centos命令行系列之centos6防火墙的关闭以及开启
输入:cat /etc/issue 查看版本 (一)通过service命令 注:service命令开启以及关闭防火墙为即时生效,下次重启机器的时候会自动复原 查看防火墙状态:service ipt ...
- Charles破解网站收藏（持续更新）
1. 在这个网站(http://charles.iiilab.com/)下载破解文件 charles.jar 2. 替换掉原文件夹里的charles.jar Mac: /Applications/Ch ...
- [LeetCode] 95. Unique Binary Search Trees II(给定一个数字n，返回所有二叉搜索树) ☆☆☆
Unique Binary Search Trees II leetcode java [LeetCode]Unique Binary Search Trees II 异构二叉查找树II Unique ...
- Android应用启动时Activity被创建两次
项目需要使用到播放器,用开源的ijkplayer播放器改装. 但是在调试过程中Activity的OnCreate()被调用两次,调试时直接连接手机调试,有时候又不一定是两次. 后来偶尔看到一句话 “当 ...