JS+css3实现幻灯片轮播图

程序员文章站 2022-06-24 23:00:54

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

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   *{
    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;
   }
  </style>
 </head>
 <body>
  <div class="slide_view">
   <ul class="slides clearfix hor-slide-ani" style="position: relative;">
    <li class="active" style="background: salmon;">1</li>
    <li style="background: darkcyan;">2</li>
    <li style="background: seagreen;">3</li>
    <li style="background: sandybrown;">4</li>
   </ul>
   <div class="control">
    <span class="prev">←</span>
    <span class="next">→</span>
   </div>
  </div>
</body>

<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
  <script>
   var aniname = (function(el) {
    var animations = {
    animation: 'animationend',
    oanimation: 'oanimationend',
    mozanimation: 'mozanimationend',
    webkitanimation: 'webkitanimationend',
    };
  
    for (var t in animations) {
    if (el.style[t] !== undefined) {
     return animations[t];
    }
    }
    return false;
   })(document.createelement('div'));
   
   var aniendcallback=function($ele,endcall){
    if(aniname && typeof endcall == 'function'){
     var called=false;
     //在每次transitionend的事件后执行该函数
     var callback = function(){ 
      if (!called){
       called=true;
       endcall($ele);
      } 
     };
     $ele[0].addeventlistener(aniname,function(){
      callback();
      //通过settimeout来补救windowphone中不触发事件的问题
      settimeout(callback,200);
     },false);
    }else{
     endcall($ele);
    }   
   };
   
   
   
   $(function(){
    var anistatus = false;
    $('.next').click(function(){
     if(anistatus){return};
     anistatus = true;
     var $slides = $('.slides').children()
     , slidecount = $slides.length
     , $active = $('.active')
     , curactiveindex = $('.active').index()
     , nextactiveindex = curactiveindex -1;
     if(curactiveindex == 0){
      nextactiveindex = slidecount-1;
     }
     $slides.eq(curactiveindex).addclass('next-out');
     $slides.eq(nextactiveindex).addclass('next-in');
     
     aniendcallback($active,function($ele){
      anistatus = false;
      $active.removeclass('next-out active');
      $slides.eq(nextactiveindex).removeclass('next-in').addclass('active');
     });
    });
    
    $('.prev').click(function(){
     if(anistatus){return;}//不在动画状态，才能执行
     anistatus= true;
     var $slides = $('.slides').children()
      , slidecount = $slides.length
      , $active = $('.active')
      , curactiveindex = $('.active').index()
      , nextactiveindex = curactiveindex + 1;
      if(curactiveindex == slidecount-1){
       nextactiveindex = 0;
      }
      $slides.eq(curactiveindex).addclass('prev-out');
      $slides.eq(nextactiveindex).addclass('prev-in');
      
     aniendcallback($active,function($ele){
      anistatus = false;
      $active.removeclass('prev-out active');
      $slides.eq(nextactiveindex).removeclass('prev-in').addclass('active');
     });
    });
    
    setinterval(function(){
     $('.prev').trigger('click')
    },4000);
   });

精彩专题分享：jquery图片轮播 javascript图片轮播 bootstrap图片轮播

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

JS+css3实现幻灯片轮播图

原生js实现焦点轮播图效果

JavaScript实现大图轮播效果

UGUI轮播图组件实现方法详解

微信小程序实现banner图轮播效果

基于JavaScript实现焦点图轮播效果

两行IOS代码实现轮播图

Android实现自动轮播图效果

基于CSS3 animation动画属性实现轮播图效果

Android 使用ViewPager实现轮播图效果

js实现炫酷的左右轮播图