效果：如图所示，用户可以单击左上角的左右箭头，来控制视频展示的左右滚动。

　　　　　　　　当单击向右箭头时下面的展示视频会向左滚动隐藏，同时新的视频展示会以滚动方式显示出来。向左同理。

　　　　

css；

 * { margin:; padding:; word-break:break-all; }

 body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }

 h1, h2, h3, h4, h5, h6 { font-size:1em; }

 a { color:#2B93D2; text-decoration:none; }

 a:hover { color:#E31E1C; text-decoration:underline; }

 ul, li { list-style:none; }

 fieldset, img { border:none; }

 /* v_show style */

 .v_show { width:595px; margin:20px 0 1px 60px; }

 .v_caption { height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat 0 0; }

 .v_caption h2 { float:left; width:84px; height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; }

 .v_caption .cartoon { background-position: 0 -100px; }

 .v_caption .variety { background-position:-100px -100px; }

 .highlight_tip { display:inline; float:left; margin:14px 0 0 10px; }

 .highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(img/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; }

 .highlight_tip .current { background-position:0 -220px; }

 .change_btn { float:left; margin:7px 0 0 10px; }

 .change_btn span { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; cursor:pointer; }

 .change_btn .prev { background-position:0 -400px;  }

 .change_btn .next { width:31px; background-position:-30px -400px; }

 .v_caption em { display:inline; float:right; margin:10px 12px 0 0; font-family:simsun; }

 .v_content { position:relative; width:592px; height:160px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7; }

 .v_content_list { position:absolute; width:2500px;top:0px; left:0px; }

 .v_content ul {float:left;}

 .v_content ul li { display:inline; float:left; margin:10px 2px 0; padding:8px; background:url(img/v_bg.gif) no-repeat; }

 .v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; }

 .v_content ul li img {  width:128px; height:96px; }

 .v_content ul li h4 { width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal; }

 .v_content ul li h4 a { display:inline !important; height:auto !important; }

 .v_content ul li span { color:#666; }

 .v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; }

HTML+jQuery:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title> </title>

 <link href="style.css" rel="stylesheet" type="text/css" />

 <script type="text/javascript" src="../../scripts/jquery-1.7.2.js"></script>

 <script type="text/javascript">

     $(function(){

         var page=1;//初始化当前页面所在位置

         var i=4;//初始化每个版面放的视频图片张数

         $("span.next").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");//找到视频展示区域外围的div

             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");//跳转到第一个页面

                     page=1;

                 }else{

                     $v_show.animate({ left : '-='+v_width }, "slow");  //每次改变一个版面

                     page++;

                 }

                 //给指定的span元素添加样式，然后取出同辈元素中的样式

                 $parent.find("span").eq((page-1)).addClass("current")

                                                  .siblings().removeClass("current");

             }

         });

         $("span.prev").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 : '0px'}, "slow");

                     page=page_count;

                 }else{

                     $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");

                     page--;

                 }

                 $parent.find("span").eq((page-1)).addClass("current")

                                                  .siblings().removeClass("current");

             }

         });

     })

 </script>

 </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" >上一页</span>

             <span class="next">下一页</span>

         </div>

         <em><a href="#">更多>></a></em>

     </div>

         <!--视频展示区域-->

         <div class="v_content">

             <div class="v_content_list">

                 <ul>

                     <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

                     <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

                     <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

                     <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

                     <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>

                     <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>

                     <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>

                     <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>

                     <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>

                     <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>

                     <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>

                     <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>

                     <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

                     <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

                     <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

                     <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

                 </ul>

             </div>

         </div>

     </div>

 </body>

 </html>

jQuery制作视频网站的展示效果的更多相关文章

  1. C#中利用JQuery实现视频网站

    C#中利用JQuery实现视频网站的缩略图采集   最近有朋友想要采集优酷的视频标题和缩略图 (哈哈, 并非商业目的). 找到我帮忙, 考虑到有我刚刚发布的SpiderStudio, 我毫不犹豫的答应 ...

  2. jQuery 制作逼真的日历翻转效果的倒计时

    在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...

  3. C#中利用JQuery实现视频网站的缩略图采集

    最近有朋友想要采集优酷的视频标题和缩略图 (哈哈, 并非商业目的). 找到我帮忙, 考虑到有我刚刚发布的SpiderStudio, 我毫不犹豫的答应了. 首先在网页上视频的基本结构为: div.v - ...

  4. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  5. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  6. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  7. 微课制作软件Camtasia，来为视频添加预设动画效果

    之前已介绍过使用微课制作软件Camtasia为视频添加"缩放和平移"动画的教程以及"效果按钮"的使用. 此篇内容,我们就来介绍使用录像编辑软件--Camtasi ...

  8. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  9. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

随机推荐

  1. Qt简介

    一.Qt与Qt Creator简介        Qt是一个跨平台应用程序和 UI 开发框架.使用 Qt 您只需一次性开发应用程序,无须重新编写源代码,便可跨不同桌面和嵌入式操作系统部署这些应用程序. ...

  2. java基础篇-jar打包

    以helloworld程序为例: 一:正常流程: 1.首先编写一个hello.java的程序: public class Hello { public static void main(String[ ...

  3. Linux下使用fdisk发现磁盘空间和使用mount挂载文件系统

    若在安装Linux系统时没有想好怎么使用服务器,开始时只分了一部分给根目录.后面需要再使用时,可以通过几下一步进行分区和挂载文件系统. 看磁柱数使用情况 fdisk -l Disk /dev/sda: ...

  4. java serializable深入了解

    声明:本文转自csdn论坛,原文地址为http://blog.csdn.net/zdw890412/article/details/7380069,对原作者表示感谢! 引言 将 Java 对象序列化为 ...

  5. javascript 火狐event.keyCode不能使用event is not defined

    在项目中,登录时需要enter按钮提交页面所以需要监听键盘输出 但是在火狐中不支持 event.code 所以换了中写法 1:form中加入时间传入event <form id="fr ...

  6. 安装arbotix simulator仿真环境--9

    原创博客:转载请表明出处:http://www.cnblogs.com/zxouxuewei/  周学伟 安装之前:首先确保已经正常制作了ros工作空间并且安装了rbx1功能包: cd ~/catki ...

  7. Codeforces Round #141 (Div. 2)

    A. Is your horseshoe on the other hoof? 模拟题意. B. Two Tables 暴力枚举\(x,y\). C. Fractal Detector 显然,判断图形 ...

  8. Agent admitted failure to sign using the key

    SSH生成id_rsa, id_rsa.pub后,连接服务器却报: Agent admitted failure to sign using the key 错误. 解决方法: 在当前用户下执行命令: ...

  9. vb6中webbrowser控件树转换备忘

    Dim doc As HTMLDocument Set doc = WebBrowser1.Document Dim inputs As IHTMLElementCollection Set inpu ...

  10. shell之并行

    http://my.oschina.net/enyo/blog/271612 GNU Parallel指南 http://www.gnu.org/software/parallel/parallel_ ...