JS 無縫輪播圖1-節點操作
阿新 • • 發佈：2018-08-28
idt radius nbsp black -o flow 開開 接下來 con
無縫輪播圖
(使用節點操作)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; } body{ background:#F5F5F5; } #content{ width:300px; height:200px; background:#fff; margin:50px auto; position: relative; overflow:hidden; } #divs{ width:1200px; height:100%; position: absolute; } #divs>div{ width:300px; height:100%; float:left; text-align:center; line-height:200px; font-size:30px; } #lis{ list-style: none; position: absolute; right:10px; bottom:10px; } #lis>li{ width:30px; height:30px; background: #ccc; border-radius:30px; float:left; margin:0 6px; text-align: center; line-height: 30px; } #btns{ width:100%; height:30px; position: absolute; top:50%; left:0; margin-top:-15px; } #btns>div{ width:30px; height:50px; background:rgba(0,0,0,.4); float:left; text-align: center; line-height:50px; font-size:22px; font-weight: 300; } #btns>div:last-child{ float:right; } </style> </head> <body> <div id="content"> <div id="divs"> <div style="background: red">1</div> <div style="background: green">2</div> <div style="background: blue">3</div> <div style="background: yellow">4</div> </div> <ul id="lis"> <li style="background:black;color:#ccc">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div id="btns"> <div id="prev"><</div> <div id="last">></div> </div> </div> </body> <!-- 引入封裝好的運動函數 --> <script src="./run.js"></script> <script> //整個輪播圖 var content=document.getElementById(‘content‘); //輪播圖區域 var box=document.getElementById(‘divs‘); //輪播圖各個滑動對象 var divs=document.getElementById(‘divs‘).getElementsByTagName(‘div‘); //對應每個滑動對象的按鈕 var lis=document.getElementById(‘lis‘).getElementsByTagName(‘li‘); //左prev(上一張) 右last(下一張)按鈕 var prev=document.getElementById(‘prev‘); var last=document.getElementById(‘last‘); // 按鈕下標 上一張==>num-- 下一張==>num++ var num=0; //開關作用：當滑動對象未滑完不允許點擊其他 var istrue=true; //下一張 滑動==>封裝函數 function move(){ //點擊 if 成立 後 istrue 取反 ==> 開關作用 if(istrue){ //關閉開關 istrue=false; //下一張+1,超過總數回0 num++; if(num==lis.length){ num=0; } //當前滑塊 對應 相應按鈕 使其顯色 for(var i=0;i<lis.length;i++){ lis[i].style.background="#ccc"; lis[i].style.color=‘black‘; } lis[num].style.background="black"; lis[num].style.color=‘#ccc‘; //復制當前即（第一張）添加到所有滑塊最後 var newNode=divs[0].cloneNode(true); box.appendChild(newNode); //調用運動函數 run(運動對象[輪播圖區域],運動目標，回調函數[運動完後...]) run(box,-300,function(isok){ // console.log(`我拿到了定時器結束的時候返回的隨機值${isok}`); // 當到達目標後停止滑動 if(isok){ //打開開關 istrue=true; //刪除第一個子節點 box.removeChild(divs[0]); //且讓輪播圖區域的left回原點0 box.style.left=0; } }); } }; //點擊下一張 last.onclick=move; //自動輪播下一張 var timer1=setInterval(move,2000); //移入整個輪播圖時 停止輪播==>清除定時器 content.onmouseover=function(){ clearInterval(timer1); } //移出整個輪播圖時 開始輪播==>開啟定時器 content.onmouseout=function(){ timer1=setInterval(move,2000); } //點擊上一張 prev.onclick=function(){ if(istrue){ //關閉開關 istrue=false; //點擊上一張-1，當等於-1時，回到最後一張==> divs長度-1 num--; if(num==-1){ num=divs.length-1; } //當前滑塊 對應 相應按鈕 使其顯色 for(var i=0;i<lis.length;i++){ lis[i].style.background="#ccc"; lis[i].style.color=‘black‘; } lis[num].style.background="black"; lis[num].style.color=‘#ccc‘; //復制最後一張,添加到第一個滑塊之前 var newNode=divs[divs.length-1].cloneNode(true); box.insertBefore(newNode,divs[0]); //運動前先把box整個輪播圖往左邊一個滑塊大小，給接下來的滑動做好準備 box.style.left=‘-300px‘; //調用運動函數 run(運動對象[輪播圖區域],運動目標，回調函數[運動完後...]) run(box,0,function(isok){ if(isok){ //刪除最後一個子節點，記得此時比原來多一張 box.removeChild(divs[divs.length-1]); //打開開關 istrue=true; } }); } } //對應每個滑動對象的按鈕 綁定點擊事件 for(var i=0;i<lis.length;i++){ //給每個按鈕添加索引 lis[i].index=i; lis[i].onclick=function(){ //獲取 當前點擊索引this.index 減去 點擊前滑塊或按鈕的下標num 得到 間隔數量tap var tap=this.index - num; //如果間隔數tap大於等於0，說明是往下(右)tap張走 if(tap>=0){ //打開開關 if(istrue){ //關閉開關 istrue=false; //把 當前點擊的索引值this.index 賦給替換 當前的下標num num=this.index; //當前滑塊 對應 相應按鈕 使其顯色 for(var i=0;i<lis.length;i++){ lis[i].style.background="#ccc"; lis[i].style.color=‘black‘; } lis[num].style.background="black"; lis[num].style.color=‘#ccc‘; //復制tap張(從當前即下標0開始)添加到所有滑塊最後 for(var i=0;i<tap;i++){ var newNode=divs[i].cloneNode(true); box.appendChild(newNode); } //調用運動函數 run(運動對象[輪播圖區域],運動目標，回調函數[運動完後...]) //運動目標 = 每個滑塊寬度 * tap間隔數 run(box,-300*tap,function(isok){ // console.log(`我拿到了定時器結束的時候返回的隨機值${isok}`); // 當到達目標後停止滑動 if(isok){ //打開開關 istrue=true; //刪除tap次第一個子節點 //（刪除完一個，下一個下標也變成0，所以依然刪除下標0的節點） for(var j=0;j<tap;j++){ box.removeChild(divs[0]); } //且讓輪播圖區域的left回原點0 box.style.left=0; } }); } }else{ //否則，如果間隔數tap小於0，說明是往上(左)tap張走 //打開開關 if(istrue){ //關閉開關 istrue=false; //把 當前點擊的索引值this.index 賦給替換 當前的下標num num=this.index; //當前滑塊 對應 相應按鈕 使其顯色 for(var i=0;i<lis.length;i++){ lis[i].style.background="#ccc"; lis[i].style.color=‘black‘; } lis[num].style.background="black"; lis[num].style.color=‘#ccc‘; //復制tap張（從最後一個子節點開始復制divs.length-1-i）添加到第一個滑塊之前 // // console.log(‘legnht:‘+divs.length); for(var i=0;i<Math.abs(tap);i++){ var n=divs.length-1-i; var newNode=divs[n].cloneNode(true); box.insertBefore(newNode,divs[0]); } //運動前先把box整個輪播圖往左邊一個滑塊*tap大小，給接下來的滑動做好準備 box.style.left=(-300*Math.abs(tap))+‘px‘; //調用運動函數 run(運動對象[輪播圖區域],運動目標，回調函數[運動完後...]) run(box,0,function(isok){ if(isok){ //刪除tap次最後一個子節點，記得此時比原來多一張 for(var i=0;i<Math.abs(tap);i++){ var n=divs.length-1; box.removeChild(divs[n]); } //打開開關 istrue=true; } }); } } } } </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; } body{ background:#F5F5F5; } #content{ width:300px; height:200px; background:#fff; margin:50px auto; position: relative; overflow:hidden; } #divs{ width:1200px; height:100%; position: absolute; } #divs>div{ width:300px; height:100%; float:left; text-align:center; line-height:200px; font-size:30px; } #lis{ list-style: none; position: absolute; right:10px; bottom:10px; } #lis>li{ width:30px; height:30px; background: #ccc; border-radius:30px; float:left; margin:0 6px; text-align: center; line-height: 30px; } #btns{ width:100%; height:30px; position: absolute; top:50%; left:0; margin-top:-15px; } #btns>div{ width:30px; height:50px; background:rgba(0,0,0,.4); float:left; text-align: center; line-height:50px; font-size:22px; font-weight: 300; } #btns>div:last-child{ float:right; } </style> </head> <body> <div id="content"> <div id="divs"> <div style="background: red">1</div> <div style="background: green">2</div> <div style="background: blue">3</div> <div style="background: yellow">4</div> </div> <ul id="lis"> <li style="background:black;color:#ccc">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div id="btns"> <div id="prev"><</div> <div id="last">></div> </div> </div> </body> <!-- 引入封裝好的運動函數 --> <script src="./run.js"></script> <script> //整個輪播圖 var content=document.getElementById(‘content‘); //輪播圖區域 var box=document.getElementById(‘divs‘); //輪播圖各個滑動對象 var divs=document.getElementById(‘divs‘).getElementsByTagName(‘div‘); //對應每個滑動對象的按鈕 var lis=document.getElementById(‘lis‘).getElementsByTagName(‘li‘); //左prev(上一張) 右last(下一張)按鈕 var prev=document.getElementById(‘prev‘); var last=document.getElementById(‘last‘); // 按鈕下標 上一張==>num-- 下一張==>num++ var num=0; //開關作用：當滑動對象未滑完不允許點擊其他 var istrue=true; //下一張 滑動==>封裝函數 function move(){ //點擊 if 成立 後 istrue 取反 ==> 開關作用 if(istrue){ //關閉開關 istrue=false; //下一張+1,超過總數回0 num++; if(num==lis.length){ num=0; } //當前滑塊 對應 相應按鈕 使其顯色 for(var i=0;i<lis.length;i++){ lis[i].style.background="#ccc"; lis[i].style.color=‘black‘; } lis[num].style.background="black"; lis[num].style.color=‘#ccc‘; //復制當前即（第一張）添加到所有滑塊最後 var newNode=divs[0].cloneNode(true); box.appendChild(newNode); //調用運動函數 run(運動對象[輪播圖區域],運動目標，回調函數[運動完後...]) run(box,-300,function(isok){ // console.log(`我拿到了定時器結束的時候返回的隨機值${isok}`); // 當到達目標後停止滑動 if(isok){ //打開開關 istrue=true; //刪除第一個子節點 box.removeChild(divs[0]); //且讓輪播圖區域的left回原點0 box.style.left=0; } }); } }; //點擊下一張 last.onclick=move; //自動輪播下一張 var timer1=setInterval(move,2000); //移入整個輪播圖時 停止輪播==>清除定時器 content.onmouseover=function(){ clearInterval(timer1); } //移出整個輪播圖時 開始輪播==>開啟定時器 content.onmouseout=function(){ timer1=setInterval(move,2000); } //點擊上一張 prev.onclick=function(){ if(istrue){ //關閉開關 istrue=false; //點擊上一張-1，當等於-1時，回到最後一張==> divs長度-1 num--; if(num==-1){ num=divs.length-1; } //當前滑塊 對應 相應按鈕 使其顯色 for(var i=0;i<lis.length;i++){ lis[i].style.background="#ccc"; lis[i].style.color=‘black‘; } lis[num].style.background="black"; lis[num].style.color=‘#ccc‘; //復制最後一張,添加到第一個滑塊之前 var newNode=divs[divs.length-1].cloneNode(true); box.insertBefore(newNode,divs[0]); //運動前先把box整個輪播圖往左邊一個滑塊大小，給接下來的滑動做好準備 box.style.left=‘-300px‘; //調用運動函數 run(運動對象[輪播圖區域],運動目標，回調函數[運動完後...]) run(box,0,function(isok){ if(isok){ //刪除最後一個子節點，記得此時比原來多一張 box.removeChild(divs[divs.length-1]); //打開開關 istrue=true; } }); } } //對應每個滑動對象的按鈕 綁定點擊事件 for(var i=0;i<lis.length;i++){ //給每個按鈕添加索引 lis[i].index=i; lis[i].onclick=function(){ //獲取 當前點擊索引this.index 減去 點擊前滑塊或按鈕的下標num 得到 間隔數量tap var tap=this.index - num; //如果間隔數tap大於等於0，說明是往下(右)tap張走 if(tap>=0){ //打開開關 if(istrue){ //關閉開關 istrue=false; //把 當前點擊的索引值this.index 賦給替換 當前的下標num num=this.index; //當前滑塊 對應 相應按鈕 使其顯色 for(var i=0;i<lis.length;i++){ lis[i].style.background="#ccc"; lis[i].style.color=‘black‘; } lis[num].style.background="black"; lis[num].style.color=‘#ccc‘; //復制tap張(從當前即下標0開始)添加到所有滑塊最後 for(var i=0;i<tap;i++){ var newNode=divs[i].cloneNode(true); box.appendChild(newNode); } //調用運動函數 run(運動對象[輪播圖區域],運動目標，回調函數[運動完後...]) //運動目標 = 每個滑塊寬度 * tap間隔數 run(box,-300*tap,function(isok){ // console.log(`我拿到了定時器結束的時候返回的隨機值${isok}`); // 當到達目標後停止滑動 if(isok){ //打開開關 istrue=true; //刪除tap次第一個子節點 //（刪除完一個，下一個下標也變成0，所以依然刪除下標0的節點） for(var j=0;j<tap;j++){ box.removeChild(divs[0]); } //且讓輪播圖區域的left回原點0 box.style.left=0; } }); } }else{ //否則，如果間隔數tap小於0，說明是往上(左)tap張走 //打開開關 if(istrue){ //關閉開關 istrue=false; //把 當前點擊的索引值this.index 賦給替換 當前的下標num num=this.index; //當前滑塊 對應 相應按鈕 使其顯色 for(var i=0;i<lis.length;i++){ lis[i].style.background="#ccc"; lis[i].style.color=‘black‘; } lis[num].style.background="black"; lis[num].style.color=‘#ccc‘; //復制tap張（從最後一個子節點開始復制divs.length-1-i）添加到第一個滑塊之前 // // console.log(‘legnht:‘+divs.length); for(var i=0;i<Math.abs(tap);i++){ var n=divs.length-1-i; var newNode=divs[n].cloneNode(true); box.insertBefore(newNode,divs[0]); } //運動前先把box整個輪播圖往左邊一個滑塊*tap大小，給接下來的滑動做好準備 box.style.left=(-300*Math.abs(tap))+‘px‘; //調用運動函數 run(運動對象[輪播圖區域],運動目標，回調函數[運動完後...]) run(box,0,function(isok){ if(isok){ //刪除tap次最後一個子節點，記得此時比原來多一張 for(var i=0;i<Math.abs(tap);i++){ var n=divs.length-1; box.removeChild(divs[n]); } //打開開關 istrue=true; } }); } } } } </script> </html>
var timer; function run(obj,target,callback){ timer=setInterval(function(){ var speed=(target-obj.offsetLeft)/8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(obj.offsetLeft == target ){ clearInterval(timer); callback(true); }else{ obj.style.left=speed+obj.offsetLeft+‘px‘; callback(false); } },30); }
JS 無縫輪播圖1-節點操作