1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Document</title>
7 <style type="text/css">
8 * {
9 margin: 0;
10 padding: 0;
11 font-size: 12px;
12 }
13
14 .photo {
15 width: 400px;
16 height: 200px;
17 margin: 50px;
18 position: relative;
19 }
20
21 .main {
22 width: 400px;
23 height: 200px;
24 position: relative;
25 }
26
27 .main1 li {
28 width: 400px;
29 height: 200px;
30 list-style-type: none;
31 }
32
33 .pto {
34 position: absolute;
35 left: 0;
36 top: 0;
37 }
38
39 .pto1 {
40 width: 400px;
41 height: 200px;
42 background: red;
43 }
44
45 .pto2 {
46 width: 400px;
47 height: 200px;
48 background: pink;
49 display: none;
50 }
51
52 .pto3 {
53 width: 400px;
54 height: 200px;
55 background: blue;
56 display: none;
57 }
58
59 .btn {
60 width: 30px;
61 height: 30px;
62 position: absolute;
63 }
64
65 .btn1 {
66 left: 0;
67 top: 85px;
68 background: url("img/left.png");
69 }
70
71 .btn2 {
72 right: 0;
73 top: 85px;
74 background: url("img/right.png");
75 }
76 </style>
77 <script type="text/javascript" src="jiaodiantujs.js">
78 </script>
79
80 </head>
81
82 <body>
83 <div class="photo" id="main">
84 <div class="main">
85 <ul class="main1" id="amain">
86 <li class="pto pto1">one</li>
87 <li class="pto pto2">two</li>
88 <li class="pto pto3">three</li>
89 </ul>
90 </div>
91
92 <span class="btn btn1" id="btn1"></span>
93 <span class="btn btn2" id="btn2"></span>
94
95 </div>
96 </body>
97
98 </html>
1 function $(id) {
2 return typeof id == "string" ? document.getElementById(id) : id;
3 }
4 window.onload = function() {
5 //老规矩,这里是定义变量
6 var pto = $("amain").getElementsByTagName("li");
7 var btnleft = document.getElementById("btn1");
8 var btnright = document.getElementById("btn2");
9 var idpto = 0;
10 //定义一个点击按钮背景图变色的函数,方便调用
11 function onpto(one, two) {
12 one.style.background = two;
13 }
14 //左边按钮没有鼠标移动到的时候
15 btnleft.onmouseenter = function() {
16 onpto(this, "url(img/onleft.gif) no-repeat");
17 }
18 //左边按钮鼠标移动到的时候
19 btnleft.onmouseout = function() {
20 onpto(this, "url(img/left.png) no-repeat");
21 }
22 //右边按钮没有鼠标移动到的时候
23 btnright.onmouseenter = function() {
24 onpto(this, "url(img/onright.gif) no-repeat");
25 }
26 //右边按钮鼠标移动到的时候
27 btnright.onmouseout = function() {
28 onpto(this, "url(img/right.png) no-repeat");
29 }
30 //定义一个用于图片消失的函数
31 function hidepto() {
32 for (var i = 0; i < pto.length; i++) {
33 pto[i].style.display = "none";
34
35 }
36 }
37 //定义一个用于图片显示的函数
38 function showpto(id) {
39 for (var i = 0; i < pto.length; i++) {
40 //定义一个变量id,当id=i的时候则显示图片
41 if (i == id) {
42 pto[i].style.display = "block";
43 }
44
45 }
46 }
47 //鼠标点击左边的时候,切图
48 btnleft.onclick = function() {
49 hidepto();
50 //当idpto=0的时候,下次点击则是2,而pto.length-1则是2,所以
51 //所以,用赋值语句给idpto重新赋值
52 //为什么要pto.length-1,因为.length的长度是从1开始
53 if (idpto == 0) {
54 idpto = pto.length - 1;
55 } else {
56 idpto--;
57 }
58 showpto(idpto);
59 }
60 //鼠标点击右边时,切图
61 btnright.onclick = function() {
62 hidepto();
63 //同理,图片显示顺序是0123
64 if (idpto < pto.length - 1) {
65 idpto++;
66 } else {
67 idpto = 0;
68 }
69 showpto(idpto);
70 }
71 }
因为是注重javascript的过程，所以html和css就不细说了
时间： 2024-08-15 00:53:22