jquery实现视频滚动
原理图
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery.js"></script>
<script src="demo.js"></script>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="v_show">
<!-- 容器 -->
<div class="v_caption">
<!-- 头部标题 -->
<h2 class="cartoon" title='卡通动漫'>卡通动漫</h2>
<div class="highlight_tip">
<span class='current'>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<!-- 换页显示 -->
<div class="change_btn">
<!-- 按钮 -->
<span class="prev"><img src="data:image/左.png" alt="未显示"></span>
<span class="next"><img src="data:image/右.png" alt="未显示"></span>
</div> <em class='strong'><a href=""><i>更多>></i></a></em>
</div>
<div class="v_content">
<!-- 内容展示区域 -->
<div class="v_content_list">
<!-- 内容展示区域列表-->
<ul>
<li><a href="#"><img src="data:image/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="data:image/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="data:image/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="data:image/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="data:image/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="data:image/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="data:image/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="data:image/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="data:image/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="data:image/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="data:image/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="data:image/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="data:image/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="data:image/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="data:image/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="data:image/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
* {
margin:;
padding:;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.v_show {
position: relative;
top: 100px;
left: 150px;
overflow: hidden;
width: 920px;
height: 280px;
border: 2px solid #ddd;
box-shadow: 0 0 8px #ccc;
-webkit-box-shadow: 0 0 8px #ccc;
-moz-box-shadow: 0 0 8px #ccc;
-o-box-shadow: 0 0 8px #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
}
.v_caption {
width: 1000px;
border: 2px solid #ccc;
background: url('image/beijing.jpg') 0 -200px no-repeat;
background-size: cover;
/*cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域*/
}
.cartoon, .highlight_tip, .change_btn, .prev, .next {
display: inline-block;
margin-left: 10px;
}
/*.highlight_tip {
display: inline;
padding-left: 10px;
}*/
.highlight_tip span {
background: url('image/beijing4.jpg') -490px -50px no-repeat;
}
.change_btn span img {
padding-top: 4px;
width: 20px;
height: 20px;
}
.cartoon {
font-size: 25px;
font-weight: bold;
color: black;
}
.highlight_tip .current {
background: blue;
}
/*<!-- 内容展示区域 -->*/
.v_content {
position: relative;
}
/*<!-- 内容展示区域列表-->*/
.v_content_list {
height: 230px;
/* line-height: 230px;*/
padding-left: 30px;
position: absolute;
}
.v_content_list ul {
/* height: 230px;*/
width: 3680px;
/* line-height: 230px;这个不能加*/
position: relative;
left: -30px;
/*这个left是调整个视频内容区域的相对的位置的*/
}
.v_content_list ul li {
padding-top: 25px;
position: relative;
float: left;
height: 230px;
margin-left: 40px;
}
.v_content_list ul li h4 {
width: 180px;
height: 20px;
}
.v_content_list ul li h4 a {
color: blue;
}
.v_content_list ul li h4 a:hover {
text-decoration: underline;
}
/*.v_content_list ul li span {
width: 180px;
height: 20px;
}*/
/*.v_content_list ul li a {
display: block;
width: 180px;
height: 150px;
}*/
.v_content_list ul li a img {
width: 180px;
height: 150px;
}
.strong {
margin-left: 580px;
}
jQuery(document).ready(function($) {
var page = 1;
var i = 4; //每版放4个图片
$('span.next img').click(function() {
var $parent = $(this).parents('div.v_show'); //根据当前点击的元素获取到父元素
var $v_show = $parent.find('div.v_content_list'); //找到视频内容展示区域
var $v_content = $parent.find('div.v_content'); //找到视频内容展示区域的外围
var v_width = $v_content.width(); //获取区域内容的宽度，带单位
var len = $v_show.find('li').length; //总的视频图片数
var page_count = Math.ceil(len / i);
if (!$v_show.is(':animated')) {
if (page == page_count) {
//已经到最后一个版面了，如果再向后，必须跳转到第一个版面
$v_show.animate({
left: '0px'
}, 'slow'); //通过改变left值，跳转到第一个版面
page = 1;
} else {
$v_show.animate({
left: '-=' + (v_width - 40)
//left=left-(v_width-40)
}, 'slow');
// $('.current')..addClass('.newClass');
// var $first = $('.highlight_tip:nth-child('+page+')').siblings().html();
// console.log($first);
// console.log(v_width);
page++;
// left:'-='+width
// 的意思是：left属性的最终值，是left现有值减去width这个值
// 例如：left:'200px' 意思是left最终值变成200
// left:'+200px' 意思与上面相同，是left最终值变成200
// left:'+=200px' 假设当前left为100 意思是left最终值是当前值加200 ，最终值为300
}
$('.highlight_tip span:eq(' + (page - 1) + ')').addClass('current').siblings().removeClass('current');
// $parent.find('span').eq((page - 1)).addClass('current').siblings().removeClass('current ');
}
});
$('span.prev img').click(function() {
var $parent = $(this).parents('div.v_show'); //根据当前点击的元素获取到父元素
var $v_show = $parent.find('div.v_content_list'); //找到视频内容展示区域
var $v_content = $parent.find('div.v_content'); //找到视频内容展示区域的外围
var v_width = $v_content.width(); //获取区域内容的宽度，带单位
var len = $v_show.find('li').length; //总的视频图片数
var page_count = Math.ceil(len / i);
if (!$v_show.is(':animated')) { //判断动画是否还在进行，当快速点击停止后.立马停止动画
if (page == 1) {
//已经到第一个版面了，如果再向前，必须跳转到最后一个版面
$v_show.animate({
left: '-=' + (v_width - 40) * (page_count - 1)
}, 'slow'); //通过改变left值，跳转到第一个版面
page = page_count;
} else {
$v_show.animate({
left: '+=' + (v_width - 40)
}, 'slow');
page--;
}
$('.highlight_tip span:eq(' + (page - 1) + ')').addClass('current').siblings().removeClass('current');
// $parent.find('span').eq((page - 1)).addClass('currentment').siblings().removeClass('currentment ');
}
});
});
// 第一个问题是如何让版面循环的问题。
// //定义page
// 第二个问题是版面的移动有误差问题
// //减去margin-left的值既可
// 第三个问题是视频展示区域内容的文字无法显示
//去掉/* line-height: 230px;这个不能加*/
//第四个问题是增加样式增加不上去的问题
//写明思路：//遍历span。先给第一个span加上背景色，然后将背景色复制给下一个并且删除掉先前的。
// 为第一个span增加current,然后写入css，后面发现addClass里面的current为自己定义的与前面span里面定义的current无关
// /* height: 230px;*/
// /* line-height: 230px;这个不能加*/ 若要每个版面放5，只需要修改i,和span还有整个容器的宽度
jquery实现视频滚动的更多相关文章
- 精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
- 【jQuery】scroll 滚动到顶部
Jquery 实现页面滚动到顶端 $(document).ready(function () { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function () { // ...
- jQuery BreakingNews 间歇滚动
BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery文字左右滚动
实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText" ...
- jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery.hhLRSlider 左右滚动图片插件
/** * jQuery.hhLRSlider 左右滚动图片插件 * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- mac 堡垒机传文件
安装zssh brew install zssh 上传文件 zssh登陆上跳板机 在跳板机上ssh到相应服务器 在服务器上cd至相应要放上传文件的目录 rz -bye //在远程服务器的相应目录上运行 ...
- 记Selenium HTMLTestRunner 无法生成测试报告的总结
使用Python ,HTMLTestRunner 生成测试报告时,遇到很奇怪的问题,明明运行的结果,没有任何报错,就是不生成测试报告,纠结好久.google+baidu搜索结果也不满意,最后终于解 ...
- C++中调用OC代码
前言 最近项目中为了方便维护,底层统一使用C++编写.由于是项目是做屏幕共享sdk,所以只能底层的压缩.编解码使用C++,屏幕捕获部分Mac和win就自己实现了.那么问题就来了,因为是面向接口编程,所 ...
- SAS市场研究应用介绍:组合/联合分析
SAS市场研究应用介绍:组合/联合分析 一 SAS市场研究模块介绍 市场研究是指研究组织(企业)与客户.公众三者关系的规律的过程,是市场营销领域中的一个重要元素.它把消费者.客户.公众和营销者通过信息 ...
- gcc将c源文件中的宏展开
1: sudo gcc -P -I. -I../instrument/stubs -I../instrument/stubs -I../ -E ctrl_xfer32.cc -o preprocess ...
- 拾遗：~/.zshrc 配置
Tips: zsh 默认仅显示最近 16 条历史记录 $ # 等价于 history - :显示最近 条记录 $ history $ # 等价于 history - : 显示从第 条到最后 条,即是全 ...
- 剑指offer——40字符串的排列
题目描述 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 输入描述: 输 ...
- python+tushare获取股票每日停复牌信息
接口:suspend 更新时间:不定期 描述:获取股票每日停复牌信息 注:tushare模块下载和安装教程,请查阅我之前的文章 输入参数 名称 | 类型 | 必 ...
- canvas 画一条折线
设置画布对象 canvas id="myCanvas" ref="canvas" //获取Canvas对象(画布) var canvas = document. ...
- LNMP之PHP
PHP LNMP环境下的PHP安装 CGI指的是通用网关接口,为HTTP服务器与其他机器上的程序服务通信交流的一种工具,性能差,所以被淘汰了. FastCGI,是一个可以伸缩.高速的在HTTP服务器和 ...