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 ...
随机推荐
- jquery父、子、兄弟节点查找
js var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 var ch ...
- PHP设计模式注意点
PHP命名空间 可以更好地组织代码,与Java中的包类似. Test1.php <?php namespace Test1;//命名空间Test1 function test(){ echo _ ...
- Utils--字符串的帮助类
Utils--字符串的帮助类 一个关于字符串过滤的工具类,主要时针对username和password的过滤 package com.bw.yun.utils; import java.securit ...
- 3.Liunx网络管理命令
大纲: 1.网络信息:hostname.netstat.ifconfig ,route 2.网络配置:netconfig 3.网络测试:ping
- Socket 初识 用Socket建立一个简易Web服务器
摘自<Asp.Net 本质论>作者:郝冠军 //在.Net中.system.Net命名空间提供了网络编程的大多数数据据类型以及常用操作,其中常用的类型如下: /* IPAddress 类表 ...
- prefix word se sub suc sup suf sur out~s
1★ se 区分开,分开 ,离开 2★ sub 接近,靠近,次一等 ,次的 3★ suc 4★ sup 5★ suf 6★ sur 在~下面
- linux文件管理 文件搜索
文件搜索命令find 'find [搜索范围] [搜索条件]' 搜索文件 find / -name install.log #避免大范围搜索,会非常消耗系统资源 #find是在系统当中搜索符合条件的文 ...
- jsp 中文乱码
解决jsp中文乱码问题的几个步骤 1 jsp页面设置 <%@ page language="java" contentType="text/html; ...
- 关于scratch导出的flash画质很差的问题解决方案
Scratch的分辨率是480*360,因此把scratch文件转变为flash时,因影像和画质很差,把flash插入到ppt幻灯片后,影像和画质仍然得不到保证.经过不断摸索,这个问题终于得到解决,关 ...
- object遍历删除空值
export function deleteObjEmpty(search = {}) { for (let i in search) { search[i] == undef ...