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 ...
随机推荐
- redis之数据类型以及使用
1 redis数据类型 1. string类型: 字符串类型是 Redis 中最为基础的数据存储类型,它在 Redis 中是二进制安全的,也就是byte类型 最大容量是512M.2. hash类型: ...
- Lowest Common Ancestor of a Binary Search Tree（Java 递归与非递归）
题目描述: Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in ...
- Integer To Roman leetcode java
问题描述: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range fr ...
- 关于StringUtils的常用方法
StringUtils.split(String, char) * <pre> * StringUtils.split(null, *) = null * StringUtils.spli ...
- 『流畅的Python』第9章笔记_对象
一.Python风格 以一个二元素向量对象为例 import math from array import array class Vector2d: typecode = 'd' def __ini ...
- 使用ajax请求接口，跨域后cookie无法设置，全局配置ajax；及使用axios跨域后cookie无法设置，全局配置axios
问题一: 使用ajax/axios跨域请求接口,后端放行了,能够正常获取数据,但是cookie设置不进去,后端登录session判断失效 ajax解决办法: //设置ajax属性 crossDomai ...
- Markdown 绘制 UML 图 -- PlantUML + Gravizo(转)
原文地址:Markdown 绘制 UML 图 -- PlantUML + Gravizo
- CentOS配置教程
1.配置网卡开机自动启动 查看/etc/sysconfig/network-scripts/ifcfg-eth0的初始内容: cat /etc/sysconfig/network-scripts/if ...
- chrome hosts
# Go Hosts# 2017-05-02 02:13:04# Localhost (DO NOT REMOVE)127.0.0.1 localhost::1 localhost ip6 ...
- 逆袭之旅DAY14.东软实训.Oracle.多表连接、分组函数、子查询
2018-07-10 08:29:55 思考应用场景 异常数据的测试 6．显示能挣得奖金的雇员的姓名.工资.奖金,并以工资和奖金降序排列.select ename,sal,commfrom empWH ...