一个滑动视频揭示小功能
一个滑动视频提示小功能
<!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 src="../../scripts/jquery-1.3.1.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
var page = 1;
var i = 4;
$("span.next").bind('click', function(){
var $v_content = $(this).parents("div.v_show").find('.v_content');
var $v_show = $(this).parents("div.v_show").find('.v_content_list');
var v_width = $v_content.width();
var len = $v_content.find('.v_content_list').find("li").length;
var pageCount = Math.ceil(len / i);
if (!$v_show.is(':animated')) {
if (page == pageCount) {
$v_show.animate({
left: '0px'
}, "slow");
page = 1;
}
else {
$v_show.animate({
left: "-=" + v_width
}, "slow");
page++;
}
}
$(this).parents(".v_caption").find(".highlight_tip").find("span").removeClass("current").eq(page - 1).addClass('current');
})
$("span.prev").bind('click', function(){
var $v_content = $(this).parents("div.v_show").find('.v_content');
var $v_show = $(this).parents("div.v_show").find('.v_content_list');
var v_width = $v_content.width();
var len = $v_content.find('.v_content_list').find("li").length;
var pageCount = Math.ceil(len / i);
if (!$v_show.is(':animated')) {
if (page == 1) {
$v_show.animate({
left: "-=" + v_width * (pageCount - 1)
}, "slow");
page = pageCount;
}
else {
$v_show.animate({
left: "+=" + v_width
}, "slow");
page--;
}
$(this).parents(".v_caption").find(".highlight_tip").find("span").removeClass("current").eq(page - 1).addClass('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>
<div class="v_show" style="margin-top:8px">
<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>