當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

轮播有可能出现的问题

發布時間：2023/12/3 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了轮播有可能出现的问题小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

我們在日常生活中常常會看到各種各樣的輪播，輪播運用的范圍很廣，所以我們要學會輪播。
而剛開始學輪播的時候大家都有可能碰到一個問題，那就是圖片切換的不完整。比如我們點擊按鈕讓第一張圖片切換到第二張，但是第一張可能沒切換完就停止切換了，所以我們要在代碼運行之前就判斷其他的代碼是否正在運行。如圖：

我們在JavaScript的開頭加個判斷，然后在運行代碼之前再判斷一下。
完整的JavaScript代碼：

// JavaScript Document var transfor=false;//記錄輪播的運動狀態 var index=1; var timer=null; window.onload=function(){var prev=document.getElementById("prev");var next=document.getElementById("next");var bottons=document.getElementById("bottons").getElementsByTagName("span");var container=document.getElementById("container");prev.onclick=function(){if(transfor==true){return;}if(index==1){index=5;}else{index--;}animate(800);showbottons();};next.onclick=function(){if(transfor==true){return;}if(index==5){index=1;}else{index++;}animate(-800);showbottons();};for(var i=0;i<bottons.length;i++){bottons[i].onclick=function(){var myindex=this.getAttribute("index");var offset=-800*(myindex-index);index=myindex;animate(offset);showbottons();};}function play(){timer=setInterval(function(){next.onclick();},2300);}function stopPlay(){clearInterval(timer);}play();container.onmousemove=stopPlay;container.onmouseout=play; }; function animate(offset){transfor=true;var list=document.getElementById("list");var time=300;var interval=10;var speed=offset/(time/interval);var newleft=parseInt(list.style.left)+offset; function go(){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);}else{list.style.left=newleft+"px";if(newleft>-800){list.style.left=-800*5+"px";}if(newleft<-4000){list.style.left=-800+"px";}transfor=false;}}go();}function showbottons(){var buttons=document.getElementById("bottons").getElementsByTagName("span");for(var i=0;i<buttons.length;i++){if(buttons[i].className==="on"){//buttons[i].className="";// 賦值break;}}buttons[index-1].className="on"; }

源代碼：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <link rel="stylesheet" href="css/lb.css"> </head><body> <div class="con wrap"><div class="con1"><div class="container wrap" id="container"><div class="list" id="list" style="left: -800px"><img src="./images/2.jpg" alt=""><img src="./images/1.png" alt=""><img src="./images/3.jpg" alt=""><img src="./images/4.jpg" alt=""><img src="./images/5.png" alt=""><img src="./images/2.jpg" alt=""><img src="./images/1.png" alt=""></div><div class="bottons" id="bottons"><span index="1" class="on">1</span><span index="2">2</span><span index="3">3</span><span index="4">4</span><span index="5">5</span></div><a href="javascript:void(0);" class="prev" id="prev"><</a><a href="javascript:;" class="next" id="next">></a></div></div> </div> <script src="js/js.js"></script> </body> </html>

效果圖：

這樣子寫的話圖片就可以正常切換了，你學會了嗎！

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的轮播有可能出现的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

有可能

上一篇：谷歌域名邮箱怎么注销（谷歌域名邮箱怎么注
下一篇：怎么实现阴影效果呢？