HTML 图片相册购物相册缩略图相册简单demo

最新推荐文章于 2024-03-29 08:47:36 发布

共勉w

最新推荐文章于 2024-03-29 08:47:36 发布

阅读量1k

点赞数

分类专栏： HTML 文章标签： HTML JS CSS

本文链接：https://blog.csdn.net/weixin_43832131/article/details/89093154

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

运行结果如下：

直接贴上代码

html文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>
		<title>note2.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="photo.js"></script>

		<style type="text/css">
			.lh li {
				list-style-type: none;
				/* float: left; */
				display: inline;
			}
			
			#dt img {
				border: 1px solid threedface;
			}
			
			.spec-control {
				display: block;
				position: absolute;
				top: 415px;
				width: 17px;
				height: 54px;
				left: 335px;
			}
			
			.spec-control2 {
				display: block;
				position: absolute;
				top: 415px;
				width: 17px;
				height: 54px;
				left: 15px;
			}
			
			.border-hidden {
				border: 1px solid rgba(0, 0, 0, 0) !important;
			}
			
			.border-show {
				border: 1px solid red !important;
			}
			
			.lh {
				padding: 0 30px;
			}
			
			.lh img {
				border: "1px solid threedface";
				margin-left: 2px;
			}
			
			#spec-forward {
				background: url("left-right.png") -46px -15px;
				background-repeat: no-repeat;
				width: 20px;
				height: 60px;
			}
			
			#spec-backward {
				background: url("left-right.png") 0 -15px;
				background-repeat: no-repeat;
				width: 20px;
				height: 60px;
			}
			
			#spec-img img {
				width: 50px;
				height: 50px;
				border: 1px solid rgba(0, 0, 0, 0);
			}
		</style>

	</head>

	<body>
		<h3 align="left">图片相册</h3>
		<div id="dt" style="width: 400px">
			<img alt="" src="1.jpg" width="350" height="350" />
		</div>

		<div id="spec">

			<a href="javascript:;" class="spec-control" id="spec-forward"></a>
			<a href="javascript:;" class="spec-control2" id="spec-backward"></a>

			<div class="spec-items" style="border: 1px solid grey; width: 350px;">
				<ul class="lh" id="spec-img">
					<li>
						<img class="border-show" alt="" src="1.jpg" name="1.jpg">
					</li>
					<li>
						<img alt="" src="2.jpg" name="2.jpg">
					</li>
					<li>
						<img alt="" src="3.jpg" name="3.jpg">
					</li>
					<li>
						<img alt="" src="4.jpg" name="4.jpg">
					</li>

					<li>
						<img alt="" src="5.jpg" name="5.jpg">
					</li>
					<li>
						<img alt="" src="6.png" name="6.png">
					</li>
					<li>
						<img alt="" src="1.jpg" name="1.jpg">
					</li>

				</ul>
			</div>

		</div>

	</body>

</html>

js代码

$(document).ready(function() {
	var size = 5; // 每页显示的图片个数
	var $imgs = $("#spec-img img"); // 获取所有的img
	var len = $imgs.length; // 得到img的个数
	var current = 0; // 当前图片

	// 给所有图片注册 鼠标移动事件
	$imgs.mouseover(function(e) {
		// 当鼠标移动到某个图片时，获取其图片的name属性值，把它设置到id=dt中的img里
		$("#dt img").attr("src", this.name);

		// 鼠标移上去时,修改样式 (添加红色边框)
		$(this).parent().parent().find('img').removeClass('border-show');
		$(this).addClass('border-show');
		var index = $(".lh li").index($(this).parent());
		current = index;
	});
	// 获取id="spec-img"中所有的li元素
	var $lis = $("#spec-img li");
	// 初始化图片 判断图片的个数 如果大于size就进行隐藏数据
	if($lis.length > size) {
		$lis.each(function(i) {
			if(i >= size) {
				$(this).hide();
			}
		});
	}

	// 考虑左按钮处理
	$("#spec-backward").bind("click", function() {
		current--;
		if(current < 0) {
			current = len - 1;
		}
		$($imgs).removeClass('border-show');
		$($imgs[current]).addClass('border-show');
		$("#dt img").attr("src", ($imgs[current]).name);
		if(len <= size) { // 如果图片个数小于等于每页显示的数据
			// 则什么都不处理
		} else { // 否则根据每页显示的个数 隐藏需要隐藏的数据
			$lis.each(function(i) { // 遍历每个图片
				var start = current - 2; // 起始
				var end = current + 2; //终止
				if(start <= 0) {
					start += len;
					if(i > end && i < start) { // 隐藏数据
						$(this).hide();
					} else {
						$(this).show();
					}

				} else if(end >= len) {
					end -= len;
					if(i > end && i < start) { // 隐藏数据
						$(this).hide();
					} else {
						$(this).show();
					}
				} else {
					if(i < start || i > end) { // 隐藏数据
						$(this).hide();
					} else {
						$(this).show();
					}
				}
			});
		}

	});

	$("#spec-forward").bind("click", function() {
		current++;
		if(current >= len) {
			current = 0;
		}
		$($imgs).removeClass('border-show');
		$($imgs[current]).addClass('border-show');
		$("#dt img").attr("src", ($imgs[current]).name);
		if(len <= size) { // 如果图片个数小于等于每页显示的数据
			// 则什么都不处理
		} else { // 否则根据每页显示的个数 隐藏需要隐藏的数据
			$lis.each(function(i) { // 遍历每个图片

				if(current <= 2) { // 当前是前三条无需移动隐藏
					if(i >= size) {
						$(this).hide();
					} else {
						$(this).show();
					}
				} else { // 前后都有隐藏的数据
					var start = current - 2; // 起始
					var end = current + 2; // 终止
					if(start <= 0) { // 前面没有图片，显示最后的图片
						start += len;
						if(i > end && i < start) { // 隐藏数据
							$(this).hide();
						} else {
							$(this).show();
						}

					} else if(end >= len) { // 后面没有图片，显示开始的图片
						end -= len;
						if(i > end && i < start) { // 隐藏数据
							$(this).hide();
						} else {
							$(this).show();
						}
					} else {
						if(i < start || i > end) { // 隐藏数据
							$(this).hide();
						} else {
							$(this).show();
						}
					}

				}
			});
		}

	});

});

希望可以帮到大家。