轮播有可能出现的问题-白红宇的个人博客

轮播有可能出现的问题

发布日期：2021-05-04 19:01:46 浏览次数：30 分类：精选文章

本文共 1490 字，大约阅读时间需要 4 分钟。

我们在日常生活中常常会看到各种各样的轮播，轮播运用的范围很广，所以我们要学会轮播。

而刚开始学轮播的时候大家都有可能碰到一个问题，那就是图片切换的不完整。比如我们点击按钮让第一张图片切换到第二张，但是第一张可能没切换完就停止切换了，所以我们要在代码运行之前就判断其他的代码是否正在运行。如图：

我们在JavaScript的开头加个判断，然后在运行代码之前再判断一下。

完整的JavaScript代码：

// JavaScript Documentvar 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
   
    newleft)||(speed>0&&parseInt(list.style.left)
    
     -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

源代码：