1、视频展示效果Css：* margin:0; padding:0; 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
2、border:none; /* v_show style */.v_show width:595px; margin:20px 0 1px 60px; .v_caption height:35px; overflow:hidden; background:url(/images/btn_cartoon.gif) no-repeat 0 0; .v_caption h2 float:left; width:84px; height:35px; overflow:hidden; background:url(/images/btn_cartoon.gif) no-repeat; text-inde
3、nt:-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(
4、/images/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(/images/btn_cartoon.gif) no-repeat
5、; 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; overflo
6、w: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(/images/v_
7、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:a
8、uto !important; .v_content ul li span color:#666; .v_content ul li em color:#888; font-family:Verdana; font-size:0.9em; Html：卡通动漫1234上一页下一页更多 海贼王播放:28,276海贼王播放:28,276海贼王播放:28,276海贼王播放:28,276哆啦 A 梦播放:33,326哆啦 A 梦播放:33,326哆啦 A 梦播放:33,326哆啦 A 梦播放:33,326火影忍者播放:28,276火影忍者播放:28,276火影忍者播放:28,276火影忍者播放:28,2
9、76龙珠播放 57,865龙珠播放 57,865龙珠播放 57,865龙珠播放 57,865Js 代码：$(function()var page=1;var i=4;/每版放四张图片$(“span.next“).click(function() /绑定 click 事件 var $parent=$(this).parents(“div.v_show“);/根据当前单击元素获取父元素var $v_show=$parent.find(“div.v_content_list“);/寻找到“视屏内容展示区域“var $v_content=$parent.find(“div.v_content“);/寻
10、找到“视频内容展示区域“ 外围divvar 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_
11、show.animate(left:-=+v_width,“slow“);/left = left - v_width;向左移动，以慢速page+;$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“);/寻找
12、到“ 视屏内容展示区域“var $v_content=$parent.find(“div.v_content“);/寻找到“ 视频内容展示区域“外围 divvar 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*(page_count-1),“slow“);page=page_count; else$v_show.animate(left:+=+v_width,“slow“);page-;$parent.find(“span“).eq(page-1).addClass(“current“).siblings().removeClass(“current“);); )
