當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
生活随笔
收集整理的這篇文章主要介紹了
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> HTMLCSS代碼
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 } CSSJS代碼
1 window.οnlοad=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.οnmοuseοver=function(){ 15 clearInterval(oMain.timer); 16 } 17 oMain.οnmοuseοut=function(){ 18 oMain.timer=setInterval(next,2000); 19 } 20 for(var i=0;i<aSpan.length;i++){ 21 (function(index){ 22 aSpan[index].οnmοuseοver=function(){ 23 iCur=index; 24 tab(); 25 } 26 })(i); 27 } 28 aBtn[0].οnclick=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].οnclick=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，判斷當前是否有動畫，如果有動畫，不可以進行下一個動畫?；蛘?#xff0c;將動畫時間寫小點，可以省略這個判斷操作。
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> HTMLCSS代碼
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.οnlοad=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.οnmοuseοver=function(){ 17 clearInterval(oMain.timer); 18 } 19 oMain.οnmοuseοut=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].οnmοuseοver=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].οnclick=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.jstween.js封裝的時間版動畫函數與上面一致，這邊不在重復添加。
?
轉載于:https://www.cnblogs.com/qiqi715/p/7756351.html
總結
以上是生活随笔為你收集整理的JavaScript+HTML+CSS 无缝滚动轮播图的两种方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实验四 恶意代码技术
- 下一篇： 使用PreloadJS加载图片资源