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>
