JavaScript：100%原生js實現左右切換的輪播圖(無延遲加載)
<!--
說明：此.html文件必需有：
(1)同級文件夾json，json文件夾下必需有文件data.txt，文件data.txt的內容爲：
[{"imgSrc":"img/banner1.jpg"},
{"imgSrc":"img/banner2.jpg"},
{"imgSrc":"img/banner3.jpg"},
{"imgSrc":"img/banner4.jpg"}]
(2)同級文件夾img，img文件夾下必需有下列圖片：banner1.jpg;banner2.jpg;banner3.jpg;banner4.jpg;
-->
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; list-style: none; } .box{ width: 1000px; height: 300px; position: relative; margin:30px auto; overflow: hidden; } .box .boxInner{ width: 4000px; position: absolute; left: 0; top:0; } .box .boxInner div{ width: 1000px; height: 300px; float: left; } .box .boxInner div img{ width: 100%; height: 100%; } .box ul{ position: absolute; right:10px; bottom:10px; } .box ul li{ width: 18px; height: 18px; background: #ccc; border-radius: 50%; margin-left: 10px; float: left; cursor: pointer; } .box ul li.on{ background: lightblue; } .box a{ width: 30px; height: 30px; position: absolute; top:127px; border: 10px solid red; border-left: none; border-bottom: none; opacity: 0.3; filter:alpha(opacity=30); display: none; } .box a:hover{ opacity: 1; filter:alpha(opacity=100); } .box .btnLeft{ transform: rotate(-135deg); left:30px; } .box .btnRight{ transform: rotate(45deg); right:30px; } </style></head><body><div class="box" id="box"> <div class="boxInner"> <!--<div><img src="img/banner1.jpg" alt=""/></div> <div><img src="img/banner2.jpg" alt=""/></div> <div><img src="img/banner3.jpg" alt=""/></div> <div><img src="img/banner4.jpg" alt=""/></div>--> </div> <ul> <!--<li class="on"></li> <li></li> <li></li> <li></li>--> </ul> <a href="javascript:;" class="btnLeft"></a> <a href="javascript:;" class="btnRight"></a></div><script> function getCss(curEle,attr){ var val=null; var reg=null; if(getComputedStyle){//標準 val=getComputedStyle(curEle,false)[attr]; }else{//非標準 if(attr==='opacity'){ val=curEle.currentStyle.filter; //'alpha(opacity=10)' reg=/^alpha\(opacity[=:](\d+)\)$/i; return reg.test(val)?reg.exec(val)[1]/100:1; } val=curEle.currentStyle[attr]; } reg=/^[+-]?((\d|([1-9]\d+))(\.\d+)?)(px|pt|rem|em)$/i; return reg.test(val)?parseInt(val):val; } function setCss(curEle,attr,value){ if(attr==='float'){ curEle.style.cssFloat=value; curEle.style.styleFloat=value; return; } if(attr==='opacity'){ curEle.style.opacity=value; curEle.style.filter='alpha(opacity='+(value*100)+')'; return; } //對單位的處理 var reg=/^(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))$/i; if(reg.test(attr)){ if(!(value==='auto' || value.toString().indexOf('%')!==-1)){ value=parseFloat(value)+'px'; } } curEle.style[attr]=value; } function setGroupCss(curEle,opt){ if(opt.toString()!=='[object Object]') return; for(var attr in opt){ this.setCss(curEle,attr,opt[attr]); } } function css(curEle){ var arg2=arguments[1]; if(typeof arg2==='string'){ var arg3=arguments[2]; if(typeof arg3==='undefined'){ //當第三個參數不存在，是獲取； return this.getCss(curEle,arg2); }else{ this.setCss(curEle,arg2,arg3); } } if(arg2.toString()==='[object Object]'){ //獲取一組元素 this.setGroupCss(curEle,arg2); } } function animate(curEle,target,duration){ function tmpEffect(t, b, c, d) { return c * t / d + b; } //1.爲公式的每一個參數作準備 var begin={}; var change={}; for(var attr in target){ begin[attr]=css(curEle,attr); change[attr]=target[attr]-begin[attr]; } duration=duration||700; var time=0; //2.開啓一個定時器，讓時間不斷累加；根據時間和公式，求出最新的位置； clearInterval(curEle.timer); //開起一個定時器前，先關閉沒用的定時器 curEle.timer=setInterval(function(){ time+=10; //3.中止運動的條件（time>=duration） if(time>=duration){ css(curEle,target); clearInterval(curEle.timer); return; } //拿到每一個屬性的最新值，而且賦值給元素對應的屬性； for(var attr in target){ var curPos=tmpEffect(time,begin[attr],change[attr],duration); css(curEle,attr,curPos); } },10) } (function(){ //獲取元素 var oBox=document.getElementById("box"); var oBoxInner=oBox.getElementsByTagName('div')[0]; var aDiv=oBoxInner.getElementsByTagName('div'); var oUl=oBox.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var oBtnLeft=oBox.getElementsByTagName('a')[0]; var oBtnRight=oBox.getElementsByTagName('a')[1]; var data=null; var timer=null; var step=0; //1.獲取並解析數據 getData(); function getData(){ var xml=new XMLHttpRequest; xml.open('get','json/data.txt',false); xml.onreadystatechange=function(){ if(xml.readyState==4 && /^2\d{2}$/.test(xml.status)){ data=JSON.parse(xml.responseText); } }; xml.send(); } //2.綁定數據 bind(); function bind(){ var strDiv=''; var strLi=''; for(var i=0; i<data.length; i++){ strDiv+='<div><img src="'+data[i].imgSrc+'" alt=""/></div>'; strLi+=i===0?'<li class="on"></li>':'<li></li>'; } strDiv+='<div><img src="'+data[0].imgSrc+'" alt=""/></div>'; oBoxInner.innerHTML+=strDiv; oBoxInner.style.width=aDiv.length*aDiv[0].offsetWidth+'px'; oUl.innerHTML+=strLi; } //3.圖片自動輪播 timer=setInterval(autoMove,1400); function autoMove(){ if(step>=aDiv.length-1){ step=0; css(oBoxInner,'left',0) } step++; animate(oBoxInner,{left:-step*1000}); bannerTip(); } //4.焦點自動輪播 function bannerTip(){ var tmpStep=step>=aLi.length?0:step; for(var i=0; i<aLi.length; i++){ aLi[i].className=i==tmpStep?'on':null; } } //5.鼠標移入中止，移出繼續 oBox.onmouseover=function(){ clearInterval(timer); oBtnLeft.style.display='block'; oBtnRight.style.display='block'; }; oBox.onmouseout=function(){ timer=setInterval(autoMove,1400); oBtnLeft.style.display='none'; oBtnRight.style.display='none'; }; //6.點擊焦點手動切換 handleChange(); function handleChange(){ for(var i=0; i<aLi.length; i++){ aLi[i].index=i; aLi[i].onclick=function(){ step=this.index; animate(oBoxInner,{left:-step*1000}); bannerTip(); } } } //7.點擊左右按鈕手動切換 oBtnRight.onclick=autoMove; oBtnLeft.onclick=function(){ if(step<=0){ step=aDiv.length-1; css(oBoxInner,'left',-step*1000); } step--; animate(oBoxInner,{left:-step*1000}); bannerTip(); } })();</script></body></html>
相關文章
- 1. 圖片輪播(左右切換)--JS原生和jQuery實現
- 2. 原生JS無縫輪播圖（左右切換、導航跟隨）
- 3. 輪播圖-無左右切換-prototype
- 4. 左右無縫輪播圖的實現
- 5. 用jQuery和原生js實現圖片左右輪播
- 6. 原生js解決圖片點擊左右切換（簡單輪播圖）
- 7. JavaScript 原生js實現輪播圖
- 8. JS圖片輪播[左右輪播
- 9. JS實現圖片的延遲加載
- 10. 原生JS實現旋轉輪播圖+文字內容切換
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • ionic 加載動作 - ionic 教程
- • ☆基於Java Instrument的Agent實現
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
