話說輪播圖效果是前端er學習JS的必經之路啊，很多同學寫的第一個JS效果應該就是它了，在各大網站我們都會經常見到，但是無縫滾動運動效果的輪播圖，對于小白們來說還是有一定難度的。
我們來看看思路吧~
首先我們要實現的效果有以下幾點：
小圓點：點擊小圓點顯示與之對應的圖片
向左和向右按鈕：點擊向左按鈕圖片向后運動，點擊向右按鈕圖片向前運動
定時器：每隔 2s 自動播放
主要難點在于：
當圖片運動到最后一張，點擊向右的按鈕時，應該顯示第一張；
當前顯示的是第一張，點擊向左的按鈕時，應該顯示最后一張；
思路：
1、先將第一張圖片復制 添加到 ul 最后面，將最后一張圖片復制 添加到 ul 最前面（此時 ul 的第一張圖片是pic3，最后一張圖片是pic0）；
2、當圖片(ul)運動到pic3，繼續向前運動，運動到最后一張pic0時，瞬間把 ul 拉回到第二張圖片pic0的位置，然后在繼續向前運動；
3、當圖片(ul)向后運動到第一張圖片pic3時，瞬間把 ul 拉回到倒數第二張圖片pic3的位置。
4、還有非常關鍵的一點：定義iNow變量，用于對應當前顯示的圖片與ol中的小圓點，并且可以用來關聯 ul 的位置。
html代碼：
<div id="tab"> <ul> <li><img src="image/pic0.jpg" <li><img src="image/pic1.jpg" <li><img src="image/pic2.jpg" <li><img src="image/pic3.jpg" </ul> <ol> <li class="on"></li> <li></li> <li></li> <li></li> </ol> <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="prev" id="prev"><</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="next" id="next">></a> </div>
css代碼：
*{margin: 0; padding: 0;}li{ list-style: none;}#tab{ width: 670px; height: 240px; border: 1px solid #ccc; margin: 50px auto; position: relative;}#tab ul{ width: 2680px; height: 240px; position: absolute; left: 0; top: 0; overflow: hidden;}#tab ul li{ float: left; width: 670px;}#tab ul li img{ width: 670px;}#tab ol{ width: 80px; position: absolute; bottom: 10px; left: 50%; margin-left: -40px; overflow: hidden;}#tab ol li{ float: left; width: 10px; height: 10px; background: #ccc; border-radius: 50%; margin: 5px; cursor: pointer;}#tab ol .on{ background: #f00;}#tab .prev,#tab .next{ display: none; width: 40px; height: 60px; background: rgba(0,0,0,.3); filter:alpha(opacity:30); text-decoration: none; text-align: center; line-height: 60px; font-size: 30px; color: #fff; position: absolute; top: 50%; margin-top: -30px;}#tab .prev{ left: 0;}#tab .next{ right: 0;}js 代碼：
其中animate()是封裝好的運動框架，最后面附有說明
window.onload = function(){ var oTab = document.getElementById('tab'); var oUl = oTab.getElementsByTagName('ul')[0]; var aLi1 = oUl.children; var oOl = oTab.getElementsByTagName('ol')[0]; var aLi2 = oOl.children; var prev = document.getElementById('prev'); var next = document.getElementById('next'); //設置ul的初始位置 var iNow = 1; oUl.style.left=-aLi1[0].offsetWidth*iNow+'px'; //定時器 var timer = null; //克隆第一張圖片 添加在ul的最后面 var oLi1 = aLi1[0].cloneNode(true); //克隆最后一張圖片 添加在ul的最前面 var oLi2 = aLi1[aLi1.length-1].cloneNode(true); oUl.appendChild(oLi1); oUl.insertBefore(oLi2,aLi1[0]); oUl.style.width = aLi1[0].offsetWidth*aLi1.length+"px"; //鼠標移入tab: 關閉定時器，左右按鈕顯示 oTab.onmouseover = function(){ clearInterval(timer); prev.style.display = 'block'; next.style.display = 'block'; } //鼠標移出tab: 開啟定時器，左右按鈕隱藏 oTab.onmouseout = function(){ timer = setInterval(function(){ toNext(); },2000); prev.style.display = 'none'; next.style.display = 'none'; } //點擊小圓點 for(var i=0;i<aLi2.length;i++){ (function(index){ aLi2[index].onclick = function(){ iNow = index+1; for(var i=0;i<aLi2.length;i++){ aLi2[i].className = ''; } aLi2[index].className = 'on'; animate(oUl,{left: -iNow*aLi1[0].offsetWidth}); } })(i); } //上一個 prev.onclick=function(){ iNow--; animate(oUl,{left: -iNow*aLi1[0].offsetWidth},{complete:function(){ if(iNow == 0){ iNow = aLi1.length-2; oUl.style.left=-aLi1[0].offsetWidth*iNow+'px'; } for(var i=0;i<aLi2.length;i++){ aLi2[i].className = ''; } aLi2[iNow-1].className = 'on'; }}); } //下一個 next.onclick=function(){ toNext(); } function toNext(){ iNow++; animate(oUl,{left: -iNow*aLi1[0].offsetWidth},{complete:function(){ if(iNow == aLi1.length-1){ iNow = 1; oUl.style.left=-aLi1[0].offsetWidth*iNow+'px'; } for(var i=0;i<aLi2.length;i++){ aLi2[i].className = ''; } aLi2[iNow-1].className = 'on'; }}); } //設置定時器 timer = setInterval(function(){ toNext(); },2000);}封裝的animate()運動框架
/* * 參數說明: * obj: 運動對象 * json(json形式): 需要修改的屬性 * options(json形式): * duration: 運動時間 * easing: 運動方式（勻速、加速、減速） * complete: 運動完成后執行的函數*/function animate(obj,json,options){ var options=options || {}; var duration=options.duration || 500; //運動時間,默認值為500ms; var easing=options.easing || 'linear'; //運動方式,默認為linear勻速 var start={}; var dis={}; for(var name in json){ start[name]=parseFloat(getStyle(obj,name)); //起始位置 dis[name]=json[name]-start[name]; //總距離 } var count=Math.floor(duration/30); //總次數 var n=0; //次數 clearInterval(obj.timer); obj.timer=setInterval(function(){ if(n>count){ clearInterval(obj.timer); options.complete && options.complete(); }else{ for(var name in json){ switch(easing){ //勻速 case 'linear': var a=n/count; var cur=start[name]+dis[name]*a; //當前位置 break; //加速 case 'ease-in': var a=n/count; var cur=start[name]+dis[name]*a*a*a; break; //減速 case 'ease-out': var a=1-n/count; var cur=start[name]+dis[name]*(1-a*a*a); break; } if(name=='opacity'){ obj.style.opacity=cur; obj.style.filter = 'alpha(opacity='+cur*100+')'; //兼容IE8及以下 }else{ obj.style[name]=cur+'px'; } } } n++; },30);}//獲取非行間樣式function getStyle(obj,sName){ return (obj.currentStyle || getComputedStyle(obj,false))[sName];}以上這篇原生JS實現圖片無縫滾動方法(附帶封裝的運動框架)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
