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="image/左.png" alt="未显示"></span> <span class="next"><img src="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="image/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="image/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="image/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="image/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="image/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="image/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="image/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="image/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="image/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="image/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="image/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="image/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="image/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="image/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="image/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="image/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> </ul> </div> </div> </div> </body> </html>
* { margin: 0; padding: 0; } 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还有整个容器的宽度
