<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul li a img{
width: 100px;
height: 100px;
}
.v_caption{
float: left;
width: 100%;
}
.cartoon{
float: left;
margin-left: 20px;
}
.highlight_tip{
float: left;
margin-left: 20px;
}
.change_btn{
float: left;
margin-left: 20px;
}
em a{
float: right:;
}
ul{
overflow: hidden;
}
ul li{
float: left;
list-style: none;
margin-right: 20px;
}
.v_content{
height: 150px;
width: 480px;
position: relative;
overflow: hidden
}
.v_content_list{
width: auto;
height: 150px;
position: absolute;
left: 0px;
top: 0px;
}
.current{
color: red;
font-weight: bold;
}
</style>
</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="images/gu-01.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/gu-02.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/gu-01.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/gu-02.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/hai-01.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/hai-02.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/hai-03.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/hai-04.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/lin-01.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/lin-02.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/lin-03.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/lin-04.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/gu-01.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/gu-02.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/lin-01.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
<li>
<a href="#"><img src="images/hai-02.jpg" alt=""></a>
<h4>
<a href="#">海贼王</a>
</h4>
<span>播放：<em>28.276</em></span>
</li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.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");
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'},"normal");
page=1;
}else{
$v_show.animate({left:'-='+v_width},"normal");
page++;
}
$parent.find("span").eq(page-1).addClass('current').siblings().removeClass('current');
}
});
$("span.prev").click(function(event) {
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>
</html>
