知識(shí)要點(diǎn)
1.實(shí)現(xiàn)無(wú)限循環(huán)的原理：
以偏移的距離來(lái)判斷是否跳回第一張和最后一張
也可以利用循環(huán)判斷圖片的當(dāng)前索引值
var newLeft=parseInt(list.style.left)+offset;//當(dāng)前的偏移量+下一次的偏移量=新的偏移量list.style.left=newLeft+"px";//當(dāng)前的偏移值=新的偏移值//以偏移的距離來(lái)判斷是否跳回第一張和最后一張if(newLeft>-600){ list.style.left=-3000+"px";}if (newLeft<-3000){ list.style.left=-600+"px";}2.當(dāng)前圖片輪播的圓點(diǎn)變色顯示：
因?yàn)槊看吸c(diǎn)擊index+1 所以當(dāng)前的index-1就是button的索引
//添加on前先清空onfor(var i=0;i<buttons.length;i++){ if(buttons[i].className=="on"){ buttons[i].className=""; break; }}buttons[index-1].className="on";3.實(shí)現(xiàn)動(dòng)畫(huà)滾動(dòng)效果：
原理就是把每次的偏移量分為多次完成比如一次600px那就分為10次每次偏移60px
就要用到setTimeout(go,10);//10毫秒再次調(diào)用go函數(shù)，一直到不滿足條件就停
var newLeft=parseInt(list.style.left)+offset;//當(dāng)前的偏移量+下一次的偏移量=新的偏移量var time=300;//位移總時(shí)間var interval=10;//位移間隔時(shí)間//動(dòng)畫(huà)效果自定義公式： 每次位移的距離=單次偏移距離/位移次數(shù)var speed=offset/(time/interval);//遞歸函數(shù) 直到不滿足條件（跳到輔助圖）//遞歸就是把600偏移量分為多次完成偏移function go(){ //speed<0 并且 當(dāng)前偏移量>下一次偏移量 就是向左偏移 || 反之向右偏移 if ((speed<0 &&parseInt(list.style.left)>newLeft) || (speed>0 &&parseInt(list.style.left)<newLeft)) { list.style.left=parseInt(list.style.left)+speed+"px";//每次位移的值 setTimeout(go,interval);//10毫秒再次調(diào)用go函數(shù) }else{ animated=false; list.style.left=newLeft+"px";//當(dāng)前的偏移值=新的偏移值 if(newLeft>-600){ list.style.left=-3000+"px"; } if (newLeft<-3000){ list.style.left=-600+"px"; } }}4.點(diǎn)擊圓點(diǎn)按鈕執(zhí)行動(dòng)畫(huà)：
原理獲取當(dāng)前的按鈕位置再獲取要點(diǎn)擊的按鈕的位置
用（點(diǎn)擊的――當(dāng)前的）*-600=需要跳轉(zhuǎn)的正負(fù)距離（向左或向右）
for(var i=0;i<buttons.length;i++){ buttons[i].onclick=function(){ if(this.className=="on"){ return; } //要點(diǎn)擊的index屬性的值 轉(zhuǎn)換為整數(shù) var myIndex=parseInt(this.getAttribute("index")); //偏移量=-600*（要點(diǎn)擊的位置-當(dāng)前所在的位置），當(dāng)前的位置就是index循環(huán)所得 var os=-600*(myIndex-index); //切換完成后，把點(diǎn)擊的index位置變成當(dāng)前的index位置 index=myIndex; showButton(); if(!animated){ animate(os); } }}5.自動(dòng)播放：
給外層容器加個(gè)onmouseover事件再調(diào)用setInterval方法
//給方法定義全局變量是因?yàn)橥Ｖ沟臅r(shí)候要使用function play(){ timer=setInterval(function(){ next.onclick(); },3000);}clearInterval(timer)完整代碼
注：圖片鏈接本地替換一下
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>demo</title><style>body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}h1,h2,h3,h4,h5,h6{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}ul,ol{list-style:none;}a{text-decoration:none;}a:hover{text-decoration:none;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}legend{color:#000;}fieldset,img{border:0;}button,input,select,textarea{font-size:100%;}table{border-collapse:collapse;border-spacing:0;}.clear{clear: both;float: none;height: 0;overflow: hidden;}#container{width: 600px; height: 400px; overflow: hidden; position: relative; }#list{width: 4200px; height: 400px; position: absolute; z-index: 1;}#list img{float: left;}#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}#buttons .on { background: orangered;}.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}.arrow:hover { background-color: RGBA(0,0,0,.7);}#container:hover .arrow { display: block;}#prev { left: 20px;}#next { right: 20px;}</style> </head> <body> <div id="container"> <div id="list" style="left: -600px;"> <img src="images/5.jpg" alt="5"/> <img src="images/1.jpg" alt="1"/> <img src="images/2.jpg" alt="2"/> <img src="images/3.jpg" alt="3"/> <img src="images/4.jpg" alt="4"/> <img src="images/5.jpg" alt="5"/> <img src="images/1.jpg" alt="1"/> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div> <script type="text/javascript"> //在頁(yè)面加載完后立即執(zhí)行多個(gè)函數(shù)方案。 function addloadEvent(func){ var oldonload=window.onload; if(typeof window.onload !="function"){ window.onload=func; } else{ window.onload=function(){ if(oldonload){ oldonload(); } func(); } } } //在頁(yè)面加載完后立即執(zhí)行多個(gè)函數(shù)方案結(jié)束。 addloadEvent(lbt); //輪播圖動(dòng)畫(huà)切換原理 function lbt(){ var container=document.getElementById("container"); var prev=document.getElementById("prev"); var next=document.getElementById("next"); var list=document.getElementById("list"); var buttons=document.getElementById("buttons").getElementsByTagName("span"); var imgs=list.getElementsByTagName("img"); var index=1; var animated=false; var timer; //當(dāng)前圖片輪播的圓點(diǎn)變色顯示，原理：index數(shù)值是跟隨list滑動(dòng)次數(shù)遞增的，第一次index=1，所以第一個(gè)button的索引值就是0。 //for循環(huán)是添加on樣式之前要清空之前的on。 function showButton(){ for(var i=0;i<buttons.length;i++){ if(buttons[i].className=="on"){ buttons[i].className=""; break; } } buttons[index-1].className="on"; } //圓點(diǎn)變色顯示 結(jié)束。 function animate(offset){ animated=true; var newLeft=parseInt(list.style.left)+offset;//當(dāng)前的偏移量+下一次的偏移量=新的偏移量 var time=300;//位移總時(shí)間 var interval=10;//位移間隔時(shí)間 //動(dòng)畫(huà)效果自定義公式： 每次位移的距離=單次偏移距離/位移次數(shù) var speed=offset/(time/interval); //遞歸函數(shù) 直到不滿足條件（跳到輔助圖） //遞歸就是把600偏移量分為多次完成偏移 function go(){ //speed<0 并且 當(dāng)前偏移量>下一次偏移量 就是向左偏移 || 反之向右偏移 if ((speed<0 &&parseInt(list.style.left)>newLeft) || (speed>0 &&parseInt(list.style.left)<newLeft)) { list.style.left=parseInt(list.style.left)+speed+"px";//每次位移的值 setTimeout(go,interval);//10毫秒再次調(diào)用go函數(shù) }else{ animated=false; list.style.left=newLeft+"px";//當(dāng)前的偏移值=新的偏移值 if(newLeft>-600){ list.style.left=-3000+"px"; } if (newLeft<-3000){ list.style.left=-600+"px"; } } } go(); } //自動(dòng)播放3秒執(zhí)行一次next.onclick function play(){ timer=setInterval(function(){ next.onclick(); },3000); } function stop(){ clearInterval(timer); } //執(zhí)行所有函數(shù) next.onclick=function(){ if(index==5){ index=1; }else{ index+=1; } showButton(); if(!animated){ animate(-600); } } //執(zhí)行所有函數(shù) prev.onclick=function(){ if(index==1){ index=5; }else{ index-=1; } showButton(); if(!animated){ animate(600); } } //點(diǎn)擊圓點(diǎn)按鈕 偏移 for(var i=0;i<buttons.length;i++){ buttons[i].onclick=function(){ if(this.className=="on"){ return; } //要點(diǎn)擊的index屬性的值 轉(zhuǎn)換為整數(shù) var myIndex=parseInt(this.getAttribute("index")); //偏移量=-600*（要點(diǎn)擊的位置-當(dāng)前所在的位置），當(dāng)前的位置就是index循環(huán)所得 var os=-600*(myIndex-index); //切換完成后，把點(diǎn)擊的index位置變成當(dāng)前的index位置 index=myIndex; showButton(); if(!animated){ animate(os); } } } container.onmouseover=stop; container.onmouseout=play; play(); } </script></body> </html> 以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
