第一种方式
在轮播图最后添加第一张,一张重复的图片。
点击前一张,到了第一张,将父级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 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
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封装的时间版动画函数与上面一致,这边不在重复添加。