1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0px;
9 padding: 0px;
10 }
11 ul{
12 list-style: none;
13 overflow: hidden;
14 }
15 ul li{
16 float: left;
17 width: 200px;
18 height: 50px;
19 border:3px solid black;
20 text-align: center;
21 line-height: 50px;
22 }
23 </style>
24 </head>
25 <body>
26 <ul>
27 <li>1</li>
28 <li>2</li>
29 <li>3</li>
30 <li>4</li>
31 <li>5</li>
32 </ul>
33 <script>
34 // 除了通过ID名获取标签,还有通过标签名获取标签
35 var lis=document.getElementsByTagName('li');
36 for(var i=0;i<lis.length;i++){
37 console.log(lis[i]);
38 // this关键字: 代表当前操作的对象
39 lis[i].onclick=function(){
40 // 排他
41 for(var j=0;j<lis.length;j++){
42 lis[j].style.background='white';
43 }
44 this.style.background='red';
45 }
46 };
47 </script>
48 </body>
49 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0px;
9 padding: 0px;
10 }
11 #show{
12 width: 500px;
13 overflow: hidden;
14 margin:200px auto;
15 /*border: 3px solid black;*/
16 position: relative;
17 }
18 div ul{
19 list-style: none;
20 width: 3000px;
21 overflow: hidden;
22 /*margin-left:-500px;*/
23 /*transition:all 1s;*/
24 }
25 div ul li{
26 float:left;
27 }
28 div span{
29 position: absolute;
30 width:40px;
31 height: 40px;
32 background: rgba(0,0,0,0.5);
33 top:50%;
34 margin-top: -20px;
35 font-size:30px;
36 text-align: center;
37 line-height: 37px;
38 color: white;
39 cursor: pointer;
40 }
41 div #btn_left{
42 left: -10px;
43 border-radius: 0px 20px 20px 0px ;
44 }
45 div #btn_right{
46 right:-10px;
47 border-radius: 20px 0px 0px 20px ;
48 }
49 #ol1{
50 list-style: none;
51 overflow: hidden;
52 background: #ccc;
53 height: 20px;
54 width: 88px;
55 border-radius: 10px;
56 position: absolute;
57 left:50%;
58 margin-left: -44px;
59 bottom: 30px;
60 }
61 #ol1 li{
62 float:left;
63 width: 10px;
64 height: 10px;
65 background: white;
66 border-radius: 50%;
67 margin-right:7px;
68 margin-top: 5px;
69 cursor: pointer;
70 }
71 #ol1 li:nth-of-type(5){
72 margin-right: 0px;
73 }
74 #ol1 li:nth-of-type(1){
75 margin-left: 5px;
76 }
77 </style>
78 </head>
79 <body>
80 <div id="show">
81 <ul id="ul1">
82 <li><img src="img/bg01.jpg" alt="" width="500px"/></li>
83 <li><img src="img/bg02.jpg" alt="" width="500px"/></li>
84 <li><img src="img/bg03.jpg" alt="" width="500px"/></li>
85 <li><img src="img/bg04.jpg" alt="" width="500px"/></li>
86 <li><img src="img/bg05.jpg" alt="" width="500px"/></li>
87 <li><img src="img/bg01.jpg" alt="" width="500px"/></li>
88 </ul>
89 <span id="btn_left"> < </span>
90 <span id="btn_right"> > </span>
91 <ol id="ol1">
92 <li></li>
93 <li></li>
94 <li></li>
95 <li></li>
96 <li></li>
97 </ol>
98 </div>
99 <script>
100 var ul1=document.getElementById('ul1');
101 var show=document.getElementById('show');
102 var btn_l=document.getElementById('btn_left');
103 var btn_r=document.getElementById('btn_right');
104 // document.getElementsByTagName('li');
105 var ol1=document.getElementById('ol1').children;
106 // 运用.children获取下来的标签,也是一个数组 使用时必须要带下标
107 var i=0;
108 var timer;
109 timer=setInterval(function(){
110 i++;
111 if(i==2500){
112 i=0;
113 }
114 ul1.style.marginLeft=-i+"px";
115 },5);
116 show.onmouseover=function(){
117 clearInterval(timer);
118 }
119 show.onmouseout=function(){
120 clearInterval(timer);
121 timer=setInterval(function(){
122 i++;
123 if(i==2500){
124 i=0;
125 }
126 ul1.style.marginLeft=-i+"px";
127 },5);
128 }
129 btn_l.onclick=function(){
130 i--;
131 if(i==-1){
132 i=4;
133 }
134 ul1.style.marginLeft=-500*i+"px";
135 }
136 btn_right.onclick=function(){
137 i++;
138 if(i==5){
139 i=0;
140 }
141 ul1.style.marginLeft=-500*i+"px";
142 }
143 for(var j=0;j<ol1.length;j++){
144 // 1,先给所有的li标签设置下标值 setAttribute方法
145 // 2,点击之后,获取当前点击中的li标签的index值
146 // 3,把获取到的index值,用于ul1
147 // this:当前操作的对象
148 ol1[j].setAttribute('index',j);
149 ol1[j].onclick=function(){
150 var index=this.getAttribute('index');
151 console.log(index);
152 for(var k=0;k<ol1.length;k++){
153 ol1[k].style.background='white';
154 }
155 this.style.background='#f60';
156 }
157 }
158
159 </script>
160 </body>
161 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0px;
9 padding: 0px;
10 }
11 #show{
12 width: 500px;
13 overflow: hidden;
14 margin:200px auto;
15 /*border: 3px solid black;*/
16 position: relative;
17 }
18 div ul{
19 list-style: none;
20 width: 3000px;
21 overflow: hidden;
22 /*margin-left:-500px;*/
23 /*transition:all 1s;*/
24 }
25 div ul li{
26 float:left;
27 }
28 div span{
29 position: absolute;
30 width:40px;
31 height: 40px;
32 background: rgba(0,0,0,0.5);
33 top:50%;
34 margin-top: -20px;
35 font-size:30px;
36 text-align: center;
37 line-height: 37px;
38 color: white;
39 cursor: pointer;
40 }
41 div #btn_left{
42 left: -10px;
43 border-radius: 0px 20px 20px 0px ;
44 }
45 div #btn_right{
46 right:-10px;
47 border-radius: 20px 0px 0px 20px ;
48 }
49 #ol1{
50 list-style: none;
51 overflow: hidden;
52 background: #ccc;
53 height: 20px;
54 width: 88px;
55 border-radius: 10px;
56 position: absolute;
57 left:50%;
58 margin-left: -44px;
59 bottom: 30px;
60 }
61 #ol1 li{
62 float:left;
63 width: 10px;
64 height: 10px;
65 background: white;
66 border-radius: 50%;
67 margin-right:7px;
68 margin-top: 5px;
69 cursor: pointer;
70 }
71 #ol1 li:nth-of-type(5){
72 margin-right: 0px;
73 }
74 #ol1 li:nth-of-type(1){
75 margin-left: 5px;
76 background: #f60;
77 }
78 </style>
79 </head>
80 <body>
81 <div id="show">
82 <ul id="ul1">
83 <li><img src="img/bg01.jpg" alt="" width="500px"/></li>
84 <li><img src="img/bg02.jpg" alt="" width="500px"/></li>
85 <li><img src="img/bg03.jpg" alt="" width="500px"/></li>
86 <li><img src="img/bg04.jpg" alt="" width="500px"/></li>
87 <li><img src="img/bg05.jpg" alt="" width="500px"/></li>
88 </ul>
89 <span id="btn_left"> < </span>
90 <span id="btn_right"> > </span>
91 <ol id="ol1">
92 <li></li>
93 <li></li>
94 <li></li>
95 <li></li>
96 <li></li>
97 </ol>
98 </div>
99 <script>
100 var ul1=document.getElementById('ul1');
101 var show=document.getElementById('show');
102 var btn_l=document.getElementById('btn_left');
103 var btn_r=document.getElementById('btn_right');
104 // document.getElementsByTagName('li');
105 var ol1=document.getElementById('ol1').children;
106 // 运用.children获取下来的标签,也是一个数组 使用时必须要带下标
107 var i=0;
108 var timer;
109 timer=setInterval(function(){
110 for(var g=0;g<ol1.length;g++){
111 ol1[g].style.background='white';
112 }
113 i++;
114 if(i==5){
115 i=0;
116 ul1.style.transition='none';
117 }
118 ul1.style.marginLeft=-500*i+"px";
119 ol1[i].style.background='#f60';
120 },1000);
121 show.onmouseover=function(){
122 clearInterval(timer);
123 }
124 show.onmouseout=function(){
125 clearInterval(timer);
126 timer=setInterval(function(){
127 for(var g=0;g<ol1.length;g++){
128 ol1[g].style.background='white';
129 }
130 i++;
131 if(i==5){
132 i=0;
133 ul1.style.transition='none';
134 }
135 ul1.style.marginLeft=-500*i+"px";
136 ol1[i].style.background='#f60';
137 },1000);
138 }
139 btn_l.onclick=function(){
140
141 i--;
142 if(i==-1){
143 i=4;
144 }
145 ul1.style.marginLeft=-500*i+"px";
146 }
147 btn_right.onclick=function(){
148 i++;
149 if(i==5){
150 i=0;
151 }
152 ul1.style.marginLeft=-500*i+"px";
153 }
154 for(var j=0;j<ol1.length;j++){
155 // 1,先给所有的li标签设置下标值 setAttribute方法
156 // 2,点击之后,获取当前点击中的li标签的index值
157 // 3,把获取到的index值,用于ul1
158 // this:当前操作的对象
159 ol1[j].setAttribute('index',j);
160 ol1[j].onclick=function(){
161 var index=this.getAttribute('index');
162 i=index;
163 console.log(index);
164 for(var k=0;k<ol1.length;k++){
165 ol1[k].style.background='white';
166 }
167 this.style.background='#f60';
168 ul1.style.marginLeft=-500*index+"px";
169 }
170 }
171 </script>
172 </body>
173 </html>
自己写的
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 *{
8 padding: 0px;
9 margin: 0px;
10 }
11 #show{
12 width: 250px;
13 margin: 200px auto;
14 overflow: hidden;
15 position: relative;
16 }
17 #pic{
18 width: 2000px;
19 list-style: none;
20 overflow: hidden;
21 transition: all 1s;
22 }
23 #show #pic li{
24 float: left;
25 }
26 #show span{
27 width: 36px;
28 height: 36px;
29 position: absolute;
30 top: 50%;
31 margin-top: -18px;
32 font-size: 28px;
33 color: white;
34 text-align: center;
35 line-height: 36px;
36 background: rgba(0,0,0,0.5);
37 cursor: pointer;
38 }
39 #show #btn_left{
40 left: -8px;
41 border-radius:0px 18px 18px 0px ;
42 }
43 #show #btn_right{
44 right: -8px;
45 border-radius:18px 0px 0px 18px ;
46 }
47 #show ol{
48 list-style: none;
49 position: absolute;
50 text-align: center;
51 font-size: 0px;
52 bottom: 13px;
53 margin-left: -30px;
54 left: 50%;
55 border-radius: 10px;
56 background: rgba(255,255,255,.3);
57 }
58 #show ol li{
59 display: inline-block;
60 margin: 3px;
61 border-radius: 50%;
62 width: 8px;
63 height: 8px;
64 color: #3C3C3C;
65 cursor: pointer;
66 background: #FFFFFF;
67 }
68 #show #ol1 li:nth-of-type(1){
69 background: #f60;
70 }
71 </style>
72 </head>
73 <body>
74 <div id="show">
75 <ul id="pic">
76 <li><img src="images/pic25.jpg"/></li>
77 <li><img src="images/pic24.jpg"/></li>
78 <li><img src="images/pic23.jpg"/></li>
79 <li><img src="images/pic22.jpg"/></li>
80 <li><img src="images/pic21.jpg"/></li>
81 </ul>
82 <span id="btn_left">
83 <
84 </span>
85 <span id="btn_right">
86 >
87 </span>
88 <ol id="ol1">
89 <li></li>
90 <li></li>
91 <li></li>
92 <li></li>
93 <li></li>
94 </ol>
95 </div>
96 <script type="text/javascript">
97 var ul=document.getElementById('pic');
98 var show=document.getElementById('show');
99 var le=document.getElementById('btn_left');
100 var ri=document.getElementById('btn_right');
101 var ol=document.getElementById('ol1').children;
102 var i=0;
103 var timer;
104 timer=setInterval(function(){
105 for(var q=0;q<ol.length;q++){
106 ol[q].style.background='#FFFFFF';
107 }
108 i++;
109 ul.style.transition='all 1s';
110 if(i==5){
111 ul.style.transition='none';
112 i=0;
113 }
114 ul.style.marginLeft=-250*i+"px";
115 ol[i].style.background='#FF6600';
116 },1000);
117 show.onmouseover=function(){
118 clearInterval(timer);
119 }
120 show.onmouseout=function(){
121 clearInterval(timer);
122 timer=setInterval(function(){
123 for(var q=0;q<ol.length;q++){
124 ol[q].style.background='#FFFFFF';
125 }
126 i++;
127 ul.style.transition='all 1s';
128 if(i==5){
129 ul.style.transition='none';
130 i=0;
131 }
132 ul.style.marginLeft=-250*i+"px";
133 ol[i].style.background='#FF6600';
134 },1000);
135 }
136 le.onclick=function(){
137 i--;
138 console.log(i);
139 if(i<0){
140 i=4;
141 }
142 for(var g=0;g<ol.length;g++){
143 ol[g].style.background='#FFFFFF';
144 }
145 ol[i].style.background='#FF6600';
146 ul.style.marginLeft=-250*i+"px";
147 }
148 ri.onclick=function(){
149 i++;
150 if(i==4){
151 i=0;
152 }
153 for(var n=0;n<ol.length;n++){
154 ol[n].style.background='#FFFFFF';
155 }
156 ol[i].style.background='#FF6600';
157 ul.style.marginLeft=-250*i+"px";
158 }
159 for(var d=0;d<ol.length;d++){
160 ol[d].setAttribute('index',d);
161
162 ol[d].onclick=function(){
163 var index=this.getAttribute('index');
164 i=index;
165 for(var j=0;j<ol.length;j++){
166 ol[j].style.background='#FFFFFF';
167 }
168 this.style.background='#FF6600';
169 ul.style.marginLeft=-250*index+"px";
170 }
171 }
172 </script>
173 </body>
174 </html>
来源：https://www.cnblogs.com/xiaochen-cmd-97/p/11178972.html