JS+css3实现幻灯片轮播图

本文实例为大家分享了JS+css3实现幻灯片轮播图的具体代码，供大家参考，具体内容如下

 
  
  
  
   *{
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   }
   .clearfix:after{
    clear: both;
   }
   .clearfix:after,.clearfix:before{
    content: "";
    display: table;
   }
   .slide_view{
    width: 600px;
    height: 200px;
    overflow: hidden;
    margin: 40px auto;
    position: relative;
   }
   ul{
    width: 600px;
    height: 100%;
   }
   li{
    position: absolute;
    width: 600px;
    height:100%;
    opacity: 0;
   }
   li.active{
    opacity: 1;
   }
   
   .hor-slide-ani .next-out
   {
    animation: hor-slide-next-out .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
   }
   .hor-slide-ani .next-in{
    animation: hor-slide-next-in .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
   }
   
   .hor-slide-ani .prev-out
   {
    animation: hor-slide-prev-out .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
   }
   .hor-slide-ani .prev-in{
    animation: hor-slide-prev-in .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
   }
   @keyframes hor-slide-next-out{
    from{
     opacity: 1;
    }
    to{
     opacity: 1;
     transform: translateX(100%);
    }
   }
   
   @keyframes hor-slide-next-in{
    from{
     opacity: 1;
     transform: translateX(-100%);
    }
    to{
     opacity: 1;
     transform: translateX(0);
    }
   }
   @keyframes hor-slide-prev-out{
    from{
     opacity: 1;
    }
    to{
     opacity: 1;
     transform: translateX(-100%);
    }
   }
   
   @keyframes hor-slide-prev-in{
    from{
     opacity: 1;
     transform: translateX(100%);
    }
    to{
     opacity: 1;
     transform: translateX(0);
    }
   }
   .prev{
    position: absolute;
    left: 10px;
    top: 40%;
    display: block;
    padding: 10px;
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: rgba(0,0,0,.4);
    color: white;
    font-size: 22px;
    line-height: 22px;
   }
   .next{
    position: absolute;
    right: 10px;
    top: 40%;
    display: block;
    padding: 10px;
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: rgba(0,0,0,.4);
    color: white;
    font-size: 22px;
    line-height: 22px;
   }
  
 
 
  
   

    
1
    
2
    
3
    
4
   
   
    ←
    →