JS焦点图手动切换 

 1 <script>
 2         function set(objdrop) {
 3             for (i = 0; i < objdrop.length; i++) {
 4                 objdrop[i].style.backgroundColor = "#fff";
 5             }         
 6         }
 7         window.onload = function () {
 8             var objdrop = document.getElementsByClassName("drop");
 9             for (i = 0; i < objdrop.length; i++) {
10                 objdrop[0].style.backgroundColor = "#000";
11                 objdrop[i].index = i;
12                 objdrop[i].onmouseover = function () {
13                     //把所有的li先变成白色
14                     set(objdrop);
15                     //再把当前的li变成黑色
16                     this.style.backgroundColor = "#000";
17                     var divPic = document.getElementById("div1");
18                     var imgs = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg", "5.jpeg"];
19                     divPic.style.backgroundImage = "url(" + imgs[this.index] + ")";                  
20                 }              
21             }
22 
23             document.getElementById("div1").index = 0;        
24       
25             var objrightbtn = document.getElementById("rightbtn");
26             objrightbtn.onclick = function () {
27                 var imgs = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg", "5.jpeg"];
28                 var picIndex = document.getElementById("div1").index;               
29                 if (picIndex ==  imgs.length-1) {
30                     picIndex = 0;
31                 }
32                 else {
33                     picIndex++;
34                 }
35                 document.getElementById("div1").index = picIndex;
36                 document.getElementById("div1").style.backgroundImage = "url(" + imgs[picIndex] + ")";
37                 //把所有的li先变成白色
38                 set(objdrop);
39                 //再把当前的li变成黑色
40                 objdrop[picIndex].style.backgroundColor = "#000";
41             }          
42             var objleftbtn = document.getElementById("leftbtn");
43             objleftbtn.onclick = function () {
44                 var imgs = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg", "5.jpeg"];
45                 var picIndex = document.getElementById("div1").index;
46                 if (picIndex == 0) {
47                     picIndex =  imgs.length-1;
48                 }
49                 else {
50                     picIndex--;
51                 }
52                 document.getElementById("div1").index = picIndex;
53                 document.getElementById("div1").style.backgroundImage = "url(" + imgs[picIndex] + ")";
54                 //把所有的li先变成白色
55                 set(objdrop);
56                 //再把当前的li变成黑色
57                 objdrop[picIndex].style.backgroundColor = "#000";
58             }
59         }
60     </script>
61 </head>
62 <body>
63     <a href="#">
64         <div id="div1">
65             <div id="leftbtn"><</div>
66             <div id="rightbtn">></div>
67             <ul id="nav">
68                 <li class="drop"></li>
69                 <li class="drop"></li>
70                 <li class="drop"></li>
71                 <li class="drop"></li>
72                 <li class="drop"></li>
73             </ul>
74         </div>
75     </a>
76 </body>

 

posted @ 2018-01-18 17:26  你的斗志并没有失去  阅读(434)  评论(0)    收藏  举报