Html5+jQuery+CSS制作相册小记录

266 阅读 0 评论 176 点赞

我是靠谱客的博主任性芝麻，这篇文章主要介绍Html5+jQuery+CSS制作相册小记录，现在分享给大家，希望可以做个参考。

本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录。

主要功能点：

Html5进行布局
调用jQuery（借用官网的一句话：The Write Less, Do More）极大的简化了JavaScript编程
CSS 样式将表现与内容分离

话不多说，先上效果图：

代码如下：

复制代码

<!DOCTYPE html>
<html>
<head>
 <title>The second html page</title>
 <style type="text/css">
  ul li
 {
  list-style-type:georgian;
  text-align:left;
  }
  body
  {
  margin:10px;
  text-align:center; 
  background-color:Orange;
  }
  header
 {
  height:80px;
  border:1px solid gray;
  width:99%
 }
  .left
 {
  border:1px solid gray;
  float:left;
  width:20%;
  height:520px;
  margin:0px;
  border-top-style:none;
  border-bottom-style:none;
  /*设置边框样式*/
 }
 .main
 {
  width:79%;
  float:left;
  height:520px;
  /*border:1px solid gray;*/
  border-right:1px solid gray;
  margin:0px;
  position:relative;/*设置成相对*/
 }
  footer
 {
  clear:left;
  height:60px;
  border:1px solid gray;
  width:99%
 }
 #container
 {
  display:block;
  padding:5px;
  /* border:1px solid gray;*/
  margin:5px;
  position:relative;
  }
  .small
  {
  display:block;
  border-bottom:1px solid gray;/*将缩略图，和大图隔开*/
  }
  .small img
  {
  width:150px;
  height:120px;
  margin:5px;
  border:1px solid gray;
  padding:3px;
  }
  .mm
  {
  cursor:pointer;
  border-radius:5px;/*鼠标移入样式*/
  
  }
  input[type="button"]
  {
  cursor:pointer;
  background-color:Orange;
  color:Lime;
  font-family:Arial;
  font-size:25px;
  height:50px;
  border:0px;
  width:50px;
  position:relative;
  top:150px;
  }
  #btnLeft
  {
  left:30px; 
  float:left;
  }
  #btnRight
  {
  right:30px; 
  float:right;
  }
 </style>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
  //初始加载六张图片作为缩略图
  for (var i = 0; i < 6; i++) {
  var src = "img/" + "0" + (i + 1).toString() + ".jpg";
  var img = $("<img />").attr("id", (i + 1).toString()).attr("alt", (i + 1).toString()).attr("src", src);
  $("#small").append(img);
  }
  //设置缩略图的点击事件，以及鼠标移入，移出事件
  $("#small img").click(function () {
  $("#img").css("display", "none");
  var src = $(this).attr("src");
  var alt = $(this).attr("alt");
  var nAlt = parseInt(alt);
  $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
  }).mouseover(function () {
  $(this).addClass("mm");
  }).mouseleave(function () {
  $(this).removeClass("mm");
  });
  var delay = 1000;
  //向左切换事件
  $("#btnLeft").click(function () {
  $("#img").css("display", "none");
  var alt = $("#img").attr("alt");
  if (alt == "1") {
   alt = 7;
  }
  var nAlt = parseInt(alt) - 1;
  var src = "img/" + "0" + nAlt.toString() + ".jpg";
  $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
  });
  //向右切换事件
  $("#btnRight").click(function () {
  $("#img").css("display", "none");
  var alt = $("#img").attr("alt");
  if (alt == "6") {
   alt = 0;
  }
  var nAlt = parseInt(alt) + 1;
  var src = "img/" + "0" + nAlt.toString() + ".jpg";
  $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);

});
 });
 </script>
</head>
<body>
<header>
<h2>Html+jQuery + CSS 相册</h2>
</header>
<aside class="left">
<h3>相册说明</h3>
 <ul>
 <li><h4>准备阶段：</h4></li>
 <li>几张图片，最好大小一致，宽高比一致</li>  
 <li>jQuery库文件</li>
 </ul>
 <ul>
 <li><h4>大致思路：</h4></li>
 <li>将界面分<b>上</b>，<b>中</b>（分 <b>左（20%）</b> <b>右（80%）</b>），<b>下</b> 几部分</li>
 <li>实现缩略图，依次放在一个容器中，并设置样式，时间</li>
 <li>实现左右切换的事件函数</li>
 </ul>
</aside>
<section class="main">
 <div class="small" id="small">
 
 </div>
 <div id="container">
 <input type="button" id="btnLeft" value="<<" />
 <img id="img" alt="1" src="img/01.jpg" width="650" height="350" />
 <input type="button" id="btnRight" value=">>" />
 </div>
</section>
<footer>
 <div>This is the footer</div>
</footer>
</body>
</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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html>
<head>
 <title>The second html page</title>
 <style type="text/css">
  ul li
 {
  list-style-type:georgian;
  text-align:left;
  }
  body
  {
  margin:10px;
  text-align:center; 
  background-color:Orange;
  }
  header
 {
  height:80px;
  border:1px solid gray;
  width:99%
 }
  .left
 {
  border:1px solid gray;
  float:left;
  width:20%;
  height:520px;
  margin:0px;
  border-top-style:none;
  border-bottom-style:none;
  /*设置边框样式*/
 }
 .main
 {
  width:79%;
  float:left;
  height:520px;
  /*border:1px solid gray;*/
  border-right:1px solid gray;
  margin:0px;
  position:relative;/*设置成相对*/
 }
  footer
 {
  clear:left;
  height:60px;
  border:1px solid gray;
  width:99%
 }
 #container
 {
  display:block;
  padding:5px;
  /* border:1px solid gray;*/
  margin:5px;
  position:relative;
  }
  .small
  {
  display:block;
  border-bottom:1px solid gray;/*将缩略图，和大图隔开*/
  }
  .small img
  {
  width:150px;
  height:120px;
  margin:5px;
  border:1px solid gray;
  padding:3px;
  }
  .mm
  {
  cursor:pointer;
  border-radius:5px;/*鼠标移入样式*/
  
  }
  input[type="button"]
  {
  cursor:pointer;
  background-color:Orange;
  color:Lime;
  font-family:Arial;
  font-size:25px;
  height:50px;
  border:0px;
  width:50px;
  position:relative;
  top:150px;
  }
  #btnLeft
  {
  left:30px; 
  float:left;
  }
  #btnRight
  {
  right:30px; 
  float:right;
  }
 </style>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
  //初始加载六张图片作为缩略图
  for (var i = 0; i < 6; i++) {
  var src = "img/" + "0" + (i + 1).toString() + ".jpg";
  var img = $("<img />").attr("id", (i + 1).toString()).attr("alt", (i + 1).toString()).attr("src", src);
  $("#small").append(img);
  }
  //设置缩略图的点击事件，以及鼠标移入，移出事件
  $("#small img").click(function () {
  $("#img").css("display", "none");
  var src = $(this).attr("src");
  var alt = $(this).attr("alt");
  var nAlt = parseInt(alt);
  $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
  }).mouseover(function () {
  $(this).addClass("mm");
  }).mouseleave(function () {
  $(this).removeClass("mm");
  });
  var delay = 1000;
  //向左切换事件
  $("#btnLeft").click(function () {
  $("#img").css("display", "none");
  var alt = $("#img").attr("alt");
  if (alt == "1") {
   alt = 7;
  }
  var nAlt = parseInt(alt) - 1;
  var src = "img/" + "0" + nAlt.toString() + ".jpg";
  $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
  });
  //向右切换事件
  $("#btnRight").click(function () {
  $("#img").css("display", "none");
  var alt = $("#img").attr("alt");
  if (alt == "6") {
   alt = 0;
  }
  var nAlt = parseInt(alt) + 1;
  var src = "img/" + "0" + nAlt.toString() + ".jpg";
  $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);

  });
 });
 </script>
</head>
<body>
<header>
<h2>Html+jQuery + CSS 相册</h2>
</header>
<aside class="left">
<h3>相册说明</h3>
 <ul>
 <li><h4>准备阶段：</h4></li>
 <li>几张图片，最好大小一致，宽高比一致</li>  
 <li>jQuery库文件</li>
 </ul>
 <ul>
 <li><h4>大致思路：</h4></li>
 <li>将界面分<b>上</b>，<b>中</b>（分 <b>左（20%）</b> <b>右（80%）</b>），<b>下</b> 几部分</li>
 <li>实现缩略图，依次放在一个容器中，并设置样式，时间</li>
 <li>实现左右切换的事件函数</li>
 </ul>
</aside>
<section class="main">
 <div class="small" id="small">
 
 </div>
 <div id="container">
 <input type="button" id="btnLeft" value="<<" />
 <img id="img" alt="1" src="img/01.jpg" width="650" height="350" />
 <input type="button" id="btnRight" value=">>" />
 </div>
</section>
<footer>
 <div>This is the footer</div>
</footer>
</body>
</html>