原生js和css实现图片轮播效果

本文实例为大家分享了javascript图片轮播效果的具体代码，供大家参考，具体内容如下

 
 
 
 
   
   
   
   
    #box { 
      width:506px; 
      height:306px; 
      margin: 20px auto; 
      border:3px solid black; 
      position:relative; 
      background-color:orange; 
      overflow: hidden; 
       
    } 
    .pic { 
      position: absolute; 
      width:500px; 
      height:300px; 
      line-height: 300px; 
      text-align: center; 
      font-size: 100px; 
      color:white; 
      bottom:0; 
    } 
    .red { 
      background-color:red; 
    } 
    .green { 
      background-color:green; 
    } 
    .blue { 
      background-color:blue; 
    } 
    .orange{ 
      background-color: orange; 
    } 
    .move { 
      bottom:300px; 
      transition:bottom 3s;  
    } 
   
 
 
 
   
    1 
    2 
    3 
    4 
   
   
   
   
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。