这里把css和html合在一块写了，这块代码只是布局和样式不是重点
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
77 .circleBtn {
78 position: absolute;
79 top: 170px;
80 right: 182px;
81 width: 42px;
82 height: 10px;
83 zoom: 1;
84 }
85
86 .circleBtn span {
87 width: 10px;
88 height: 10px;
89 margin: 0 2px;
90 float: left;
91 cursor: pointer;
92 background: url("img/cir.png");
93 }
94
95 .circleBtn .light {
96 background: url("img/oncir.gif");
97 }
98 </style>
99 <script type="text/javascript" src="jiaodiantujs.js">
100 </script>
101
102 </head>
103
104 <body>
105 <div class="photo" id="main">
106 <div class="main">
107 <ul class="main1" id="amain">
108 <li class="pto pto1">one</li>
109 <li class="pto pto2">two</li>
110 <li class="pto pto3">three</li>
111 </ul>
112 </div>
113
114 <span class="btn btn1" id="btn1"></span>
115 <span class="btn btn2" id="btn2"></span>
116 <!--
117 <div class="circleBtn" id="circleBtn">
118 <span class="light"></span>
119 <span></span>
120 <span></span>
121 </div>
122 -->
123 </div>
124 </body>
125
126 </html>
下面是Javascript代码，主要是通过左右两个按钮来控制图片左右切换
1 function $(id) {
2 return typeof id === "string" ? document.getElementById(id) : id;
3 }
4 window.onload = function() {
5 //pto变量为所展示的图片集和
6 var pto = $("amain").getElementsByTagName("li");
7 //btnleft和right为两个按钮
8 var btnleft = $("btn1");
9 var btnright = $("btn2");
10 //div变量为设置停止图片显示所需
11 var div = $("main");
12 //idBtn为当前图片的id
13 var idBtn = 0;
14 //setInterval函数所需的函数名timer
15 var timer = null;
16
17 //自定义一个函数用于按钮变换
18 function changeBtn(one, two) {
19 one.style.background = two;
20 }
21 //鼠标移动至左按钮时，套用自定义函数
22 btnleft.onmouseenter = function() {
23 //this表示当前btnleft的背景
24 changeBtn(this, "url(img/onleft.gif) no-repeat");
25 }
26 //鼠标离开至左按钮时，套用自定义函数
27 btnleft.onmouseout = function() {
28 //this同理
29 changeBtn(this, "url(img/left.png) no-repeat");
30 }
31 //鼠标移动至右按钮时，套用自定义函数
32 btnright.onmouseenter = function() {
33 changeBtn(this, "url(img/onright.gif) no-repeat");
34 }
35 //同理
36 btnright.onmouseout = function() {
37 changeBtn(this, "url(img/right.png) no-repeat");
38 }
39
40 //clearPto函数表示隐藏图片
41 function clearPto() {
42 for (var i = 0; i < pto.length; i++) {
43 pto[i].style.display = "none";
44
45 }
46 }
47 //showPto函数表示显示当前图片
48 function showPto(y) {
49 //局部变量y，为当前鼠标点击的id
50 for (var i = 0; i < pto.length; i++) {
51 //console.log(y);
52 //当点击的id和图片id，也就是y相等时候，显示图片
53 if (i == y) {
54 pto[i].style.display = "block";
55 }
56
57 }
58 }
59
60 //鼠标左击绑定函数
61 btnleft.onclick = function() {
62 //当idBtn为0 ，左击则，下一张为2，所以把长度2 赋值给idBtn
63 if (idBtn == 0) {
64 idBtn = pto.length - 1;
65 } else {
66 //同理，当不为0时，所显示的为小于当前所以要--
67 idBtn--;
68 }
69 //套用函数
70 clearPto();
71 //if语句结束，把idBtn代入函数中
72 showPto(idBtn);
73 }
74
75 btnright.onclick = function() {
76 //当idBtn小于长度，则左右为下一张，所以idBtn++
77 if (idBtn < pto.length - 1) {
78 idBtn++;
79 } else {
80 //超出长度，则下一张为0，所以把0赋值
81 idBtn = 0;
82 }
83 clearPto();
84 showPto(idBtn);
85 }
86 //判断语句，设置当前只有一个timer函数执行
87 if (timer) {
88 clearInterval(timer);
89 timer = null;
90 }
91 //鼠标离开div，则执行函数
92 div.onmouseout = start;
93 //鼠标移到div，则停止自动轮播
94 div.onmouseover = stop;
95 start();
96
97 //setInterval函数详情可以自行百度，不多解释
98 function start() {
99 timer = setInterval(function() {
100 btnright.onclick();
101 }, 2000);
102 }
103
104 function stop() {
105 clearInterval(timer);
106 }
107 }
时间： 2024-10-10 17:10:09