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

最新推荐文章于 2025-08-12 06:02:38 发布

原创最新推荐文章于 2025-08-12 06:02:38 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #JavaScript #jquery #ViewUI

java web学习笔记专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的相册插件，该插件具备翻页、高亮提示及鼠标滚轮控制等功能。通过jQuery简化DOM操作，实现图片列表的动态加载与切换，为用户提供流畅的浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!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);
	});

});