标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/nullObj/p/4811832.html
