js点击图片切换

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         #box {
 8              1200px;
 9             margin: 0 auto;
10         }
11     </style>
12 </head>
13 <body>
14     <div id="box">
15         <img id="icon" src="img/icon_01.png" alt="">
16         <p></p>
17         <button id="prev">上一张</button>
18         <button id="next">下一张</button>
19     </div>
20 <script>
21     window.onload = function (ev) {
22         // 1) 获取标签
23         var icon = document.getElementById('icon');
24         var prev = document.getElementById('prev');
25         var next = document.getElementById('next');
26 
27         // 2) 点击
28         var currentIndex = 1, minIndex = 1, maxIndex = 9;
29         prev.onclick = function (ev1) {
30             if(currentIndex === minIndex){ // 最小边界
31                 currentIndex = maxIndex;
32             }else {
33                 currentIndex--;
34             }
35             icon.setAttribute('src', 'img/icon_0'+ currentIndex + '.png');
36             console.log(icon.src);
37 
38         };
39 
40         next.onclick = function (ev1) {
41             if(currentIndex === maxIndex){ // 最大边界
42                 currentIndex = minIndex;
43             }else {
44                 currentIndex++;
45             }
46             icon.setAttribute('src', 'img/icon_0'+ currentIndex + '.png');
47             console.log(icon.src);
48         }
49     }
50 </script>
51 </body>
52 </html>

//点击上一张、下一张切换图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{margin: 0;padding: 0;}
 8         body{margin: 50px;}
 9         #fj{list-style: none;}
10         #fj li{float: left;margin-left: 10px;}
11         #big_img{margin-left: 10px;}
12         #des{margin: 10px;color: orangered;font-size: 20px;}
13     </style>
14 </head>
15 <body>
16     <!--大图描述-->
17     <p id="des">蒲公英</p>
18     <!--大图展示-->
19     <img id="big_img" src="img/1.jpg" alt="" width="540">
20     <!--小图列表-->
21     <ul id="fj">
22         <li>
23             <a href="img/1.jpg" title="蒲公英">
24                 <img src="img/1.jpg" width="100" alt="蒲公英">
25             </a>
26         </li>
27         <li>
28             <a href="img/2.jpg" title="热气球">
29                 <img src="img/2.jpg" width="100" alt="热气球">
30             </a>
31         </li>
32         <li>
33             <a href="img/3.jpg" title="别致小屋">
34                 <img src="img/3.jpg" width="100" alt="别致小屋">
35             </a>
36         </li>
37         <li>
38             <a href="img/4.jpg" title="高山湖水">
39                 <img src="img/4.jpg" width="100" alt="高山湖水">
40             </a>
41         </li>
42         <li>
43             <a href="img/5.jpg" title="高速公路">
44                 <img src="img/5.jpg" width="100" alt="高速公路">
45             </a>
46         </li>
47     </ul>
48 <script>
49     window.onload = function (ev) {
50         // 1. 获取需要的标签
51         var des = document.getElementById('des');
52         var big_img = document.getElementById('big_img');
53         var fj = document.getElementById('fj');
54         var aLists = fj.getElementsByTagName('a');
55         console.log(aLists);
56 
57         // 2. 事件绑定
58         for (var i = 0; i < aLists.length; i++) {
59             var a = aLists[i];
60             // console.log(a);
61             a.onclick = function (ev1) {
62                 console.log(this);
63                 des.innerText = this.title;
64                 big_img.setAttribute('src', this.href);
65                 // 阻止执行默认事件 a
66                 return false;
67             }
68         }
69     }
70 </script>
71 </body>
72 </html>

//点击下方的小图，切换上面的大图