图片切换
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>图片切换</title>
6 </head>
7 <body>
8 <button id="prev" style="margin-bottom: 10px">上一张</button>
9 <button id="next" style="margin-bottom: 10px">下一张</button>
10 <button id="toggle" style="margin-bottom: 10px">隐藏</button>
11 <img src="./images/image01.jpg" id="gf" style="height: 500px;width: 400px;display: block">
12 </body>
13 <script type="text/javascript">
14 function $(id) {
15 return document.getElementById(id);
16 }
17 window.onload = function () {
18 var gf = $('gf');
19 var prev = $('prev');
20 var next = $('next');
21 var tog = $('toggle');
22 var isShow = true;
23 var patt = /[1-4]+/ig;
24 // 图片切换下一张
25 next.onclick = function () {
26 var src = gf.getAttribute('src');
27 var num = Number(src.match(patt)[0]);
28 if(num != 4){
29 gf.src = src.replace(patt,(num+1).toString())
30 }else{
31 gf.src = './images/image01.jpg'
32 }
33 };
34 // 图片切换上一张
35 prev.onclick = function () {
36 var src = gf.getAttribute('src');
37 var num = Number(src.match(patt)[0]);
38 if(num != 1){
39 gf.src = src.replace(patt,(num-1).toString())
40 }else{
41 gf.src = './images/image04.jpg'
42 }
43 };
44 // 显示和隐藏图片
45 tog.onclick = function () {
46 if(isShow){
47 gf.style.display = 'none';
48 this.innerText = '显示';
49 isShow = false;
50 }else{
51 gf.style.display = 'block';
52 this.innerText = '隐藏';
53 isShow = true;
54 }
55 }
56
57 }
58 </script>
59 </html>
衣服相册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>衣服相册</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.smallImg{
margin-left: 10px;
margin-top: 20px;
border: 2px solid #fff;
height:50px;
width:50px;
float: left;
}
ul {
list-style: none;
overflow: hidden;
}
</style>
</head>
<body>
<img src="images/1.jpg" id="img">
<ul>
<li><a href=""><img src="images/1.jpg" class="smallImg"></a></li>
<li><a href=""><img src="images/2.jpg" class="smallImg"></a></li>
<li><a href=""><img src="images/3.jpg" class="smallImg"></a></li>
<li><a href=""><img src="images/4.jpg" class="smallImg"></a></li>
<li><a href=""><img src="images/5.jpg" class="smallImg"></a></li>
</ul>
</body>
<script type="text/javascript">
window.onload = function () {
var imgBig = document.getElementById('img');
var imgLi = document.getElementsByClassName('smallImg');
for(var i = 0; i < imgLi.length; i ++){
imgLi[i].onmouseover = function () {
for(var j = 0; j < imgLi.length; j ++){
imgLi[j].style.border = '2px solid #fff';
}
this.style.border = '2px solid red';
imgBig.src = this.src;
}
}
}
</script>
</html>