<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { 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 { border:none; } .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; } .highlight_tip{ display: inline; float: left; margin: 14px 0 0 10px; } .highlight_tip span{ display: inline; float: left; height: 7px; width: 7px; overflow: hidden; 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: 0; left: 0; } .v_content ul{ float: left; } .v_content ul li{ display: inline; float: left; margin: 10px 2px 0; padding: 8px; } .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; } .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; } </style> <script src="jquery-2.1.4.js"></script> <script> $(function(){ var page=1;//初始化当前版面为1 var i=4;//每版放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++; } $parent.find("span").eq((page-1)).addClass("current")//找到span元素（下标从0开始，当前页面-1，就是和页面对应的span），添加class current .siblings().removeClass("current");//其他同级元素去掉class 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:"-="+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"); } }) }) </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>
时间： 2024-10-17 23:04:34