<!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.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var page = 1;
var i = 4; //每版放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"); //寻找到“视频内容展示区域”外围的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"); //通过改变left值，跳转到第一个版面
page = 1;
}else{
$v_show.animate({ left : '-='+v_width }, "slow"); //通过改变left值，达到每次换一个版面
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"); //寻找到“视频内容展示区域”
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 == 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>
Ch4.zip_javascript_基于javascript
版权申诉
195 浏览量
2022-09-23
17:23:09
上传
评论
收藏 338KB ZIP 举报
Ch4.zip （73个子文件） 
Ch4 1-DOM准备 
4-1-1.html 559B 4-1-5-2-document.ready.html 599B 4-1-2.html 503B 4-1-5-1-window.onload.html 472B 4-1-4.html 596B 4-1-3.html 519B css 
style.css 346B 5-事件对象的属性 4-5-1 event.type.html 607B 4-5-5 event.which2.html 510B 4-5-2 event.target.html 662B 4-5-4 event.which.html 640B 4-5-6 event.metaKey.html 631B 4-5-3 event.pageX event.pageY.html 683B 2-事件绑定 4-2-4-鼠标滑过.html 1KB 4-2-1-初始化状态.html 873B 4-2-2-点击展开.html 1KB 4-2-5-展开，简写方式.html 1KB 4-2-3-点击展开2.html 1KB 0-ready() 
demo.jpg 266KB 4-0-1加载时间对比.html 941B 10-案例演示 demo3-正确实例.html 5KB img 01.jpg 4KB 04.jpg 6KB
btn_cartoon.gif 8KB b5df2063502528.t1.jpg 4KB 03.jpg 7KB 02.jpg 4KB demo1-初始化.html 3KB demo2-连续点击带bug.html 5KB style.css 2KB 6-移除事件 4-6-4.html 969B 4-6-2.html 1KB 4-6-3.html 1KB 4-6-1.html 972B 9-动画 9-1(show和hide).html 1KB 9-4(slide).html 1KB 9-16(fadeTo).html 1KB 9-7(animate多重动画2).html 794B 9-9(css()未排队).html 970B 9-15(slideToggle).html 1KB 9-10(css()排队)-queue().html 1KB 9-12(判断是否动画).html 1KB 9-14(toggle).html 1KB 9-3(fade).html 1KB 9-5(animate简单使用).html 750B 9-6(animate多重动画1).html 766B 9-2(show和hide带时间).html 1KB 9-18(animate仿其他方法).html 2KB 9-17(fadeToggle).html 1KB 9-11(stop方法) demo1-.stop(快速滑过有问题).html 1KB demo2-.stop()(解决问题).html 1KB demo3-.stop().html 2KB demo4-.stop().html 2KB demo5-.stop().html 2KB 9-13(延迟动画).html 995B 9-8(综合动画).html 949B 9-10(css()排队)-回调函数.html 1010B 7-模拟操作 4-7-3 trigger.html 958B 4-7-1 trigger.html 1000B 4-7-2 trigger.html 872B 4-7-4 triggerHandler.html 964B 3-合成事件 4-3-3合成事件toggle.html 1KB 4-3-4合成事件toggle.html 1KB 4-3-1合成事件hover.html 1KB 4-3-2合成事件toggle.html 1KB 4-事件冒泡 4-4-3-2阻止默认行为-false.html 879B 4-4-3-1阻止默认行为.html 928B 4-4-4停止事件冒泡 - false.html 1KB 4-4-2停止事件冒泡.html 2KB 4-4-1冒泡.html 1KB 8-其它用法 4-8-2事件命名空间, 便于管理.html 1015B 4-8-1事件类型多个.html 682B 4-8-3相同事件名称,不同命名空间执行方法.html 905B资源评论
