首页 > 编程语言 > JS+css3实现幻灯片轮播图
2020
10-09

JS+css3实现幻灯片轮播图

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!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>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<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图片轮播

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

编程技巧