轮播有可能出现的问题

我们在日常生活中常常会看到各种各样的轮播，轮播运用的范围很广，所以我们要学会轮播。
而刚开始学轮播的时候大家都有可能碰到一个问题，那就是图片切换的不完整。比如我们点击按钮让第一张图片切换到第二张，但是第一张可能没切换完就停止切换了，所以我们要在代码运行之前就判断其他的代码是否正在运行。如图：
轮播有可能出现的问题
我们在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">&lt;</a>
			<a href="javascript:;" class="next" id="next">&#62;</a>
		</div>
	</div>
</div>
<script src="js/js.js"></script>
</body>
</html>

效果图：
轮播有可能出现的问题

这样子写的话图片就可以正常切换了，你学会了吗！

轮播有可能出现的问题

相关推荐