16 JS应用-图片切换&衣服相册

图片切换

 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; 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>