JS+css3实现幻灯片轮播图

本文实例为大家分享了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);
      });

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