jquery1.7动画模拟空间相册滚动浏览 -

qiyang318

浏览: 7163 次
性别:

最近访客更多访客>>

abwaker

风之谷少年

whrjsyzby

mideatt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-11 ( 5)
更多存档...

jquery1.7动画模拟空间相册滚动浏览

博客分类：

java web学习笔记

html JavaScript jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery</title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/my8.js"></script>
<link rel="stylesheet" href="css/glob.css" type="text/css"></link>
</head>
<body>
	<div class="view_show">
		<img alt="" src="images/bimg1.jpg">
	</div>
	<div class="v_show2">
		<div class="v_caption">
			<h2 class="cartoon" title="myphoto">我的相册</h2>
			<div class="highlight_tip">
				<span id="1" class="current">●</span>
				<span id="2">●</span>
				<span id="3">●</span>
				<span id="4">●</span>
			</div>
			<div class="change_btn">
				<span id="0" class="prev">上一页</span>
				<span id="1" 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/bimg1.jpg" alt="照片" /></a>
						<h4><a href="#">照片1</a></h4>
						<span>上传：<i>2012-10-07</i></span>
					</li>
					更多li				</ul>
			</div>
		</div>
	</div>
</body>
</html>

*{margin: 0px;padding: 0px;}
.v_show{
	width: 475px;
	margin:0px auto;
	margin-top:20px;
	border: 1px solid #ccc;
}

span{
	color: blue;
}

.current{
	color: yellow;
}

.highlight_tip span,.prev,.next{
	cursor: pointer;
	margin-left: 10px;
}
.v_caption{
	width: 475px;
	background-color: #ccc;
	line-height: 30px;
}
.v_caption h2{
	margin-left: 8px;
	color: green;
}
.cartoon,.highlight_tip,.change_btn{
	float: left;
}
.v_show em{
	float: right;
}

.v_show2 em{
	float: right;
}

.v_content{
	width: 475px;
	overflow:hidden;
	position: relative;
}
.v_content_list{
	margin-top:10px;
	height: 120px;
	position: relative;
}
.v_content_list ul li{
	float: left;
	width:100px;
	margin-left:15px;
	list-style: none;
	line-height:20px;
	font-size: 12px;
	text-align: center;
	overflow: hidden;
}
.v_content_list ul li a img{
	border:0;
	height: 80px;
}
.v_content_list ul li h4 a{
	border:0;
	text-decoration: none;
	line-height:20px;
	font-size: 12px;
}

.v_content_list ul li span i{
	font-size: 12px;
	color: blue;
}


/*相册*/
.view_show{
	width:475px;
	margin: 0px auto;
	text-align: center;
}
.view_show img{
	height: 355px;
}
.v_show2{
	width: 475px;
	margin:0px auto;
	border: 1px solid #ccc;
}

$(function(){
	//计算图片层的总宽度
	var $list_width = ($(".v_content_list ul li").length)*$(".v_content").width();
	//设置图片层的总宽度
	$(".v_content_list").css({
		"width":$list_width
	});
	
	var page = 1;//页码
	var i = 4;	 //每页显示四张图片
	var $parent = $(".v_show2");
	var $v_show = $parent.find("div.v_content_list");
	var $v_content = $parent.find("div.v_content");
	var v_width=$v_content.width()-15;	//
	var len = $v_show.find("li").length;//多少张图片
	var page_count = Math.ceil(len/i);	//获取总页数
	
	//翻页
	function fanye(type){
		if(!$v_show.is(":animated")){
			if($(this).attr("id")==1 || type==-1){
				//当动画达到最后一版
				if(page == page_count){
					$v_show.animate({left:'0px'},1000);
					page = 1;
				}else{
					$v_show.animate({left:'-='+v_width+"px"},1000);
					page++;
				}
			}else{
				if(page == 1){
					$v_show.animate({left:'-='+v_width*(page_count-1)+"px"},1000);
					page = page_count;
				}else{
					$v_show.animate({left:'+='+v_width+"px"},1000);
					page--;
				}
			}
		}
		$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
	}
	
	//上一页
	$("span.prev").click(fanye);
	//下一页
	$("span.next").click(fanye);
	//单击缩略图显示大图
	$(".v_content_list ul li img").click(function(){
		var src = this.src;
		$(".view_show").fadeOut(500,function(){
			$(".view_show img").attr("src",src);
		});
		$(".view_show").fadeIn(500);
		return false;
	});
	//鼠标滚轮事件 d：-1下滚； 1：上滚
	$(".v_show2").mousewheel(function(e,d){
		fanye(d);
	});
	
});

分享到：