JS实现简易图片自动轮播

本文实例为大家分享了JS实现简易图片自动轮播的具体代码，供大家参考，具体内容如下

 
 
 
 
 *{
 margin:0;
 padding:0;
 }
 
 .box{
 width:600px;
 height:400px;
 border:1px solid red;
 margin:100px auto;
 position:relative;
 }
 
 a{
 font-size:40px;
 position:absolute;
 text-decoration:none;
 top:-10px;
 }
 #prev{
 
 left:0;
 }
 #next{
 
 right:0;
 
 }
 #pos{
 margin-left:30px;
 }
 input{
 width:90px;
 height:40px;
 float:left;
 outline:none;
 border:0;
 }
 .box div{
 width:600px;
 height:400px;
 background:skyblue;
 text-align:center;
 line-height:300px;
 font-size:100px;
 font-weight:bold;
 text-shadow:5px 5px 5px #f90;
 display:none;
 }
 
 .box .show{
 display:block;
 }
 .box .active{
 width:88px;
 color:#fff;
 font-size:18px;
 font-weight:bold;
 background:#f90;
 }