Fork me on GitHub

相册

发表于 | | 阅读次数:

老规矩，先贴上index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>精品相册1</title>
		<link rel="stylesheet" href="css/img_style.css" />
	</head>
	<body>
		
		<div id="picList">
			<!--<div id="Left"></div>-->
			<span><img src="img/main/1.jpg"/></span>
			<span><img src="img/main/2.jpg"/></span>
			<span><img src="img/main/3.jpg"/></span>
			<span><img src="img/main/4.jpg"/></span>
			<span><img src="img/main/5.jpg"/></span>
			<span><img src="img/main/6.jpg"/></span>
			<span><img src="img/main/7.jpg"/></span>
			<span><img src="img/main/8.jpg"/></span>
			<span><img src="img/main/9.jpg"/></span>
			<!--<div id="Right"></div>-->
		</div>
		
		<!--
        	作者：sunstady@gmail.com
        	时间：2017-08-11
        	描述：添加挡板
        -->
		<div id="pan"></div>
		<!--
        	作者：sunstady@gmail.com
        	时间：2017-08-11
        	描述：显示特效图片的位置 包含图片以及按钮
        -->
		<div id="show">
			<!--
            	作者：sunstady@gmail.com
            	时间：2017-08-11
            	描述：中间显示图片容器的位置
            -->
			<div id="showimage">
				<span><img src="img/show/0/1.jpg" title="1"/></span>
				<span><img src="img/show/0/2.jpg" title="2"/></span>
				<span><img src="img/show/0/3.jpg" title="3"/></span>
				<span><img src="img/show/0/4.jpg" title="4"/></span>
				<span><img src="img/show/0/5.jpg" title="5"/></span>
			</div>
			<!--
            	作者：sunstady@gmail.com
            	时间：2017-08-11
            	描述：切换图片的按钮
            -->
			<span id="pre"> <p><</p></span>
			<span id="next"><p>></p></span>
		</div>
	</body>
	<!--
    	作者：sunstady@gmail.com
    	时间：2017-08-11
    	描述：导入js文件
    -->
	<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
	<script type="text/javascript">
		$(function(){
			//点击每一张图片容器的时候
			$("#picList span").click(function(){
				//获取showimage中的所有img标签
				var $img = $("#showimage img");
				//获取点击的那一个图片
				//$(this).index();返回指定元素在相对应的集合中下标的位置
				var index = $(this).index();//0
				for(var i=0;i<5;i++){
					//获取图片路径
					//img/show/0/1.jpg
					var url="img/show/"+index+"/"+(i+1)+".jpg";
					//更换图片
					$img.eq(i).attr("src",url);
				}
				//让特效显示
				//淡入效果、600毫秒的执行时间
				$("#pan").fadeIn(600);
				$("#show").fadeIn(600).show();
			});
			//点击挡板的事件，让特效消失
			$("#pan").click(function(){
				//淡出的效果
				$("#pan").fadeOut(600);
				$("#show").fadeOut(600);
			});
			//点击下一张按钮
			$("#next").click(function(){
				//索引到最后 一张图片
				$("#showimage span:last-child").animate(
					{left:"680px"},500,function(){
						$(this).animate({left:"0px"},500);
						//更换位置
						//将指定的元素，插入到当前集合中的开头位置
						$("#showimage").prepend(this);
					});
			});
			//点击上一张按钮
			$("#pre").click(function(){
				//索引到第一张图片
				$("#showimage span:first-child").animate(
					{left:"-680px"},500,function(){
						$(this).animate({left:"0px"},500);
						//更换位置
						//将指定的元素，插入到当前集合中的结尾位置
						$("#showimage").append(this);
					});
			});
		});
	</script>
	
</html>

/img目录下的图片放在ghthub

/js目录下的jquery-1.11.3.js

/css目录下的img_style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
*{
	margin: 0;
	padding: 0;
	
}
/*添加背景*/
body{
	background: url(../img/bg.jpg);
	/*隐藏滚动栏*/
	overflow: hidden;
}
#picList{
	width: 750px;
	height: 600px;
	/*margin:第一个上下距离 第二个左右距离 auto 自适应*/
	margin: 100px auto;
}
img{
	width: 230px;
	height: 160px;
	padding: 5px;
	margin: auto auto;
}
/*行内元素不支持宽高的设置*/
span{
	background-color: #FFFFFF;
	width: 240px;
	height: 170px;
	/*把行内元素改变成块元素，支持宽高的设置*/
	display: block;
	float: left;
	margin: 5px;
	/*加入外阴影*/
	box-shadow: 0px 0px 20px #FFFFFF;
}
/*遮光挡板*/
#pan{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	/*前三个参数：设置颜色编码 第四个参数：设置透明度*/
	background: rgba(0,0,0,0.8);
	/*设置默认隐藏*/
	display: none;
}
#showimage{
	/*设置中间容器的显示位置*/
	position: absolute;
	top: 150px;
	left: 50%;
	margin-left: -330px;
	/*设置层级显示关系*/
	z-index: 10;
}
/*设置每一张大图的容器边框*/
/*派生选择器控制绝对路径的属性*/
#showimage span{
	width: 650px;
	height: 440px;
	background: #FFFFFF;
	box-shadow: 0px 0px 0px #FFFFFF;
	position: absolute;
	
}
#showimage img{
	width: 640px;
	height: 430px;
}
#show p{
	color: white;
	font-size: 60px;
	text-align: center;
	margin-top: -5px;
	/*设置粗体*/
	font-weight: bold;
}
/*上一张图片的按钮*/
#pre{
	position: absolute;
	width: 50px;
	height: 80px;
	top: 320px;
	left: 10%;
	background: rgba(0,0,0,0.5);
	/*设置圆角*/
	border-radius: 10px;
	z-index: 20px;
}
#next{
	position: absolute;
	width: 50px;
	height: 80px;
	top: 320px;
	right: 10%;
	background: rgba(0,0,0,0.5);
	/*设置圆角*/
	border-radius: 10px;
	z-index: 20px;
}
/*让这个显示特效的区域隐藏*/
#show{
	display: none;
}
Your support will encourage me to continue to create!