原生JS轮播图
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 </head> 7 <style> 8 *{ 9 margin:0px; 10 padding:0px; 11 } 12 13 li{ 14 list-style: none; /*取消li默认的前缀*/ 15 } 16 17 img{ 18 display: block; /*解决图片之间3px的问题*/ 19 } 20 21 /*用一个容器包裹起来*/ 22 #container{ 23 position: relative; 24 margin: 0 auto; 25 margin-top: 130px; 26 width: 750px; 27 height: 352px; 28 border: 1px solid #ccc; 29 } 30 31 /*隐藏掉容器所有的图片*/ 32 #container>ul>li{ 33 position:absolute; 34 display: none; 35 36 } 37 38 /*显示容器中的图片active属性的那张*/ 39 #container>ul>li.active{ 40 display: block; 41 } 42 43 #buttons{ 44