JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

第一种方式

在轮播图最后添加第一张，一张重复的图片。

点击前一张，到了第一张，将父级oList移动到最后一张（也就是添加的重复的第一张)，在进行后续动画。

点击下一张，到了最后一张（也就是添加的重复的第一张），将父级oList移动到第一张，在进行后续动画。

HTML代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>无缝</title>
 6 <link rel="stylesheet" type="text/css" href="css/index.css">
 7 <script type="text/javascript" src="js/index.js"></script>
 8     <script type="text/javascript" src="js/tween.js"></script>
 9 </head>
10 <body>
11 <div class="banner">
12     <div class="main">
13         <a href="javascript:;" class="btnPre"> < </a>
14         <a href="javascript:;" class="btnNext"> > </a>
15         <ul class="list">
16             <li>
17                 <img src="img/1.png">
18             </li>
19             <li>
20                 <img src="img/2.png">
21             </li>
22             <li>
23                 <img src="img/3.png">
24             </li>
25             <li>
26                 <img src="img/4.png">
27             </li>
28             <li>
29                 <img src="img/5.png">
30             </li>
31             <li>
32                 <img src="img/1.png">
33             </li>
34         </ul>
35         <nav class="nav">
36             <span></span>
37             <span></span>
38             <span></span>
39             <span></span>
40             <span></span>
41         </nav>
42     </div>
43 </div>
44 </body>
45 </html>

HTML

CSS代码

 1 body {
 2     margin:0;
 3 }
 4 ul {
 5     margin:0;
 6     padding:0;
 7     list-style: none;
 8 }
 9 img {
10     border:none;
11     vertical-align: top;
12 }
13 a {
14     text-decoration: none;
15 }
16 .banner {
17     margin:30px auto;
18     padding:135px 146px 202px 144px;
19      420px;
20     background-image: url(../img/bg.png);
21     background-repeat: no-repeat;
22 }
23 .main {
24     position: relative;
25     height: 320px;
26     overflow: hidden;
27 }
28 .main>a {
29     position: absolute;
30     z-index: 2;
31     top:50%;
32      49px;
33     height:63px;
34     font-size: 50px;
35     line-height: 63px;
36     text-align: center;
37     color: #fff;
38     background-color: rgba(0,0,0,.3);
39     transform: translateY(-50%);
40 }
41 .banner .btnPre {
42     left:0;
43 }
44 .banner .btnNext {
45     right:0;
46 }
47 .nav {
48     position: absolute;
49     z-index: 2;
50     left: 0;
51     bottom: 18px;
52      100%;
53     font-size: 0;
54     text-align: center;
55 }
56 .nav span {
57     display: inline-block;
58     vertical-align: bottom;
59     margin-right: 14px;
60      10px;
61     height: 10px;
62     background-color: #fff;
63     cursor: pointer;
64 }
65 .nav span:last-child {
66     margin-right: 0;
67 }
68 .list {
69      600%;
70     height: 320px;
71     margin-left: 0px;
72 }
73 .list li {
74     float: left;
75      420px;
76     height: 320px;
77 }
78 .list li img {
79      420px;
80     height: 320px;
81 }

CSS

JS代码

 1 window.onload=function(){
 2     (function(){
 3         var aBtn=document.querySelectorAll('.main>a');
 4         var oMain=document.querySelector('.main');
 5         var oList=document.querySelector('.list');
 6         var aLi=document.querySelectorAll('.list li');
 7         var aSpan=document.querySelectorAll('.nav span');
 8         var iLiW=css(aLi[0],'width');
 9         var iCur= 0;
10         tab();
11 
12         oMain.timer=setInterval(next,2000);
13         /*事件*/
14         oMain.onmouseover=function(){
15             clearInterval(oMain.timer);
16         }
17         oMain.onmouseout=function(){
18             oMain.timer=setInterval(next,2000);
19         }
20         for(var i=0;i<aSpan.length;i++){
21             (function(index){
22                 aSpan[index].onmouseover=function(){
23                     iCur=index;
24                     tab();
25                 }
26             })(i);
27         }
28         aBtn[0].onclick=function (){
29             if(iCur==0){
30                 iCur=aLi.length-1;
31                 css(oList,'margin-left',-iCur*iLiW);
32             }
33             iCur--;
34             tab();
35         };
36         aBtn[1].onclick=next;
37 
38         /*下一张*/
39         function next(){
40             if(iCur==aLi.length-1){
41                 iCur=0;
42                 css(oList,'margin-left',-iCur*iLiW);
43             }
44             iCur++;
45             tab();
46         };
47 
48         /*动画*/
49         function tab(){
50             startMove(oList, {'margin-left':-iCur*iLiW},500,'linear');
51             for(var i=0;i<aSpan.length;i++){
52                 startMove(aSpan[i], {'height':10},500,'linear');
53             }
54             startMove(aSpan[iCur%aSpan.length], {'height':20},500,'linear');
55         }
56     })();
57 }

index.js

  1 var Tween = {
  2     linear: function (t, b, c, d){
  3         return c*t/d + b;
  4     },
  5     easeIn: function(t, b, c, d){
  6         return c*(t/=d)*t + b;
  7     },
  8     easeOut: function(t, b, c, d){
  9         return -c *(t/=d)*(t-2) + b;
 10     },
 11     easeBoth: function(t, b, c, d){
 12         if ((t/=d/2) < 1) {
 13             return c/2*t*t + b;
 14         }
 15         return -c/2 * ((--t)*(t-2) - 1) + b;
 16     },
 17     easeInStrong: function(t, b, c, d){
 18         return c*(t/=d)*t*t*t + b;
 19     },
 20     easeOutStrong: function(t, b, c, d){
 21         return -c * ((t=t/d-1)*t*t*t - 1) + b;
 22     },
 23     easeBothStrong: function(t, b, c, d){
 24         if ((t/=d/2) < 1) {
 25             return c/2*t*t*t*t + b;
 26         }
 27         return -c/2 * ((t-=2)*t*t*t - 2) + b;
 28     },
 29     elasticIn: function(t, b, c, d, a, p){
 30         if (t === 0) { 
 31             return b; 
 32         }
 33         if ( (t /= d) == 1 ) {
 34             return b+c; 
 35         }
 36         if (!p) {
 37             p=d*0.3; 
 38         }
 39         if (!a || a < Math.abs(c)) {
 40             a = c; 
 41             var s = p/4;
 42         } else {
 43             var s = p/(2*Math.PI) * Math.asin (c/a);
 44         }
 45         return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 46     },
 47     elasticOut: function(t, b, c, d, a, p){
 48         if (t === 0) {
 49             return b;
 50         }
 51         if ( (t /= d) == 1 ) {
 52             return b+c;
 53         }
 54         if (!p) {
 55             p=d*0.3;
 56         }
 57         if (!a || a < Math.abs(c)) {
 58             a = c;
 59             var s = p / 4;
 60         } else {
 61             var s = p/(2*Math.PI) * Math.asin (c/a);
 62         }
 63         return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 64     },    
 65     elasticBoth: function(t, b, c, d, a, p){
 66         if (t === 0) {
 67             return b;
 68         }
 69         if ( (t /= d/2) == 2 ) {
 70             return b+c;
 71         }
 72         if (!p) {
 73             p = d*(0.3*1.5);
 74         }
 75         if ( !a || a < Math.abs(c) ) {
 76             a = c; 
 77             var s = p/4;
 78         }
 79         else {
 80             var s = p/(2*Math.PI) * Math.asin (c/a);
 81         }
 82         if (t < 1) {
 83             return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
 84                     Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 85         }
 86         return a*Math.pow(2,-10*(t-=1)) * 
 87                 Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
 88     },
 89     backIn: function(t, b, c, d, s){
 90         if (typeof s == 'undefined') {
 91            s = 1.70158;
 92         }
 93         return c*(t/=d)*t*((s+1)*t - s) + b;
 94     },
 95     backOut: function(t, b, c, d, s){
 96         if (typeof s == 'undefined') {
 97             s = 2.70158;  //回缩的距离
 98         }
 99         return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
100     }, 
101     backBoth: function(t, b, c, d, s){
102         if (typeof s == 'undefined') {
103             s = 1.70158; 
104         }
105         if ((t /= d/2 ) < 1) {
106             return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
107         }
108         return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
109     },
110     bounceIn: function(t, b, c, d){
111         return c - Tween['bounceOut'](d-t, 0, c, d) + b;
112     },       
113     bounceOut: function(t, b, c, d){
114         if ((t/=d) < (1/2.75)) {
115             return c*(7.5625*t*t) + b;
116         } else if (t < (2/2.75)) {
117             return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
118         } else if (t < (2.5/2.75)) {
119             return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
120         }
121         return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
122     },      
123     bounceBoth: function(t, b, c, d){
124         if (t < d/2) {
125             return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
126         }
127         return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
128     }
129 };
130 function css(el,attr,val){
131     if(arguments.length > 2){
132         if(attr == "opacity"){
133             el.style[attr] = val;
134             el.style.filter = "alpha(opacity = "+val*100+")";
135         } else {
136             el.style[attr] = val + "px";
137         }
138     } else {
139         return el.currentStyle?parseFloat(el.currentStyle[attr]):parseFloat(getComputedStyle(el)[attr]);
140     }
141 }
142 function startMove(el,target,time,type,callBack){
143     var t = 0;
144     var b = {};//初始值
145     var c = {};
146     var d = Math.ceil(time/20);
147     for(var s in target){
148         //console.log(s);
149         b[s] = css(el,s);
150         c[s] = target[s] - b[s];
151     }
152     clearInterval(el.timer);
153     el.timer = setInterval(function(){
154         if(t >= d){
155             clearInterval(el.timer);
156             callBack&&callBack();
157         } else {
158             t++;
159             for(var s in target){
160                 var val = Tween[type](t,b[s],c[s],d); 
161                 css(el,s,val);
162             }    
163         }
164     },20); 
165 }

twen.js

第二种方式

只保留2张图位置。

点击上一张，aImg[0].src 为前一张的地址， aImg[1].src为当前张的地址，父级oList的margin-left为负的图片宽度，轮播图向右滑动。

点击下一张，aImg[0].src 为当前张的地址， aImg[1].src为下一张的地址，父级oList的margin-left为0，轮播图向左滑动。

注意：此种写法需要加一个变量isMove，判断当前是否有动画，如果有动画，不可以进行下一个动画。或者，将动画时间写小点，可以省略这个判断操作。

HTML代码和CSS代码基本与上面一致

HTML代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>无缝-第二种思路</title>
 6 <link rel="stylesheet" type="text/css" href="css/index.css">
 7 <script type="text/javascript" src="js/index.js"></script>
 8     <script type="text/javascript" src="js/tween.js"></script>
 9 </head>
10 <body>
11 <!--同时让下面的导航只会让两张图片变动-->
12 <div class="banner">
13     <div class="main">
14         <a href="javascript:;" class="btnPre"> < </a>
15         <a href="javascript:;" class="btnNext"> > </a>
16         <ul class="list">
17             <li>
18                 <img src="img/1.png">
19             </li>
20             <li>
21                 <img src="img/2.png">
22             </li>
23         </ul>
24         <nav class="nav">
25             <span></span>
26             <span></span>
27             <span></span>
28             <span></span>
29             <span></span>
30         </nav>
31     </div>
32 </div>
33 </body>
34 </html>

HTML

CSS代码

 1 body {
 2     margin:0;
 3 }
 4 ul {
 5     margin:0;
 6     padding:0;
 7     list-style: none;
 8 }
 9 img {
10     border:none;
11     vertical-align: top;
12 }
13 a {
14     text-decoration: none;
15 }
16 .banner {
17     margin:30px auto;
18     padding:135px 146px 202px 144px;
19     width: 420px;
20     background-image: url(../img/bg.png);
21     background-repeat: no-repeat;
22 }
23 .main {
24     position: relative;
25     height: 320px;
26     overflow: hidden;
27 }
28 .main>a {
29     position: absolute;
30     z-index: 2;
31     top:50%;
32     width: 49px;
33     height:63px;
34     font-size: 50px;
35     line-height: 63px;
36     text-align: center;
37     color: #fff;
38     background-color: rgba(0,0,0,.3);
39     transform: translateY(-50%);
40 }
41 .banner .btnPre {
42     left:0;
43 }
44 .banner .btnNext {
45     right:0;
46 }
47 .nav {
48     position: absolute;
49     z-index: 2;
50     left: 0;
51     bottom: 18px;
52     width: 100%;
53     font-size: 0;
54     text-align: center;
55 }
56 .nav span {
57     display: inline-block;
58     vertical-align: bottom;
59     margin-right: 14px;
60     width: 10px;
61     height: 10px;
62     background-color: #fff;
63     cursor: pointer;
64 }
65 .nav span:last-child {
66     margin-right: 0;
67 }
68 .list {
69     width: 600%;
70     height: 320px;
71     margin-left: 0px;
72 }
73 .list li {
74     float: left;
75     width: 420px;
76     height: 320px;
77 }
78 .list li img {
79     width: 420px;
80     height: 320px;
81 }

CSS

 1 window.onload=function(){
 2     (function(){
 3         var aBtn=document.querySelectorAll('.main>a');
 4         var oMain=document.querySelector('.main');
 5         var oList=document.querySelector('.list');
 6         var aLi=document.querySelectorAll('.list li');
 7         var aSpan=document.querySelectorAll('.nav span');
 8         var aImg=document.querySelectorAll('.list img');
 9         var iArrImgSrc=['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];
10         var iLiW=css(aLi[0],'width');
11         var iCur= 0;
12         tab();
13 
14         /*定时器*/
15         oMain.timer=setInterval(toNext,2000);
16         oMain.onmouseover=function(){
17             clearInterval(oMain.timer);
18         }
19         oMain.onmouseout=function(){
20             oMain.timer=setInterval(toNext,2000);
21         }
22 
23         /*鼠标移入导航*/
24         for(var i=0;i<aSpan.length;i++){
25             (function(index){
26                 aSpan[index].onmouseover=function(){
27                     (index > iCur) && toNext(index);
28                     (index < iCur) && toPre(index);
29                 }
30             })(i);
31         }
32 
33         /*前一张点击事件*/
34         aBtn[0].onclick =function(){
35             toPre();
36         };
37 
38         /*后一张点击事件*/
39         aBtn[1].onclick=function(){
40             toNext();
41         };
42 
43         var isMove=false;
44         /*前一张*/
45         function toPre(index) {
46             if(isMove){
47                 return;
48             }
49             var pre=arguments.length==1?index:(iCur-1+aSpan.length)%aSpan.length;
50             aImg[0].src=iArrImgSrc[pre];
51             aImg[1].src=iArrImgSrc[iCur];
52             css(oList,'margin-left',-iLiW);
53             isMove = true;
54             startMove(oList, {'margin-left':0},500,'linear',function(){
55                 isMove = false;
56             });
57             iCur=pre;
58             tab();
59         };
60 
61         /*后一张*/
62         function toNext(index) {
63             if(isMove){
64                 return;
65             }
66             var next=arguments.length==1?index:(iCur+1)%aSpan.length;
67             aImg[0].src=iArrImgSrc[iCur];
68             aImg[1].src=iArrImgSrc[next];
69             css(oList,'margin-left',0);
70             isMove = true;
71             startMove(oList, {'margin-left':-iLiW},500,'linear',function(){
72                 isMove = false;
73             });
74             iCur=next;
75             tab();
76         };
77 
78         /*下边导航运动*/
79         function tab(){
80             for(var i=0;i<aSpan.length;i++){
81                 startMove(aSpan[i], {'height':10},500,'linear');
82             }
83             startMove(aSpan[iCur], {'height':20},500,'linear');
84         }
85     })();
86 }

index.js

tween.js封装的时间版动画函数与上面一致，这边不在重复添加。

相关阅读:
移动端(手机端)页面自适应解决方案1（rem布局）---750设计稿
 ionic4之ion-sliders
ionic4 新建
 Object的多种方法
 angular的Hash 模式和 HTML 5 模式
 关于滚动条
 前端笔记（1-20）
百度图片网址
 ImageLoader_显示图片
 viewpager_轮播
原文地址：https://www.cnblogs.com/qiqi715/p/7756351.html