原生js轮播图的左右按钮点击事件

[microarea]

如下代码中，哪位高手帮忙看下，左右按钮的点击事件最后clickFlag已经变成false了，为什么点击结束后clickFlag又立即变成了true？谢谢大神们~~

<script type="text/javascript">
var wrap=document.getElementById("wrap");
var inner=document.getElementById("inner");
var spanList=document.getElementById("paganation").getElementsByTagName("span");
var left=document.getElementById("left");
var right=document.getElementById("right");
var clickFlag=true;//设置左右切换标记位防止连续按
var time//主要用来设置自动滑动的计时器
var index=0;//记录每次滑动图片的下标
var Distance=wrap.offsetWidth;//获取展示区的宽度，即每张图片的宽度

// 定义图片滑动的函数
function AutoGo(){
var start=inner.offsetLeft;//获取移动块当前的left的开始坐标
var end=index*Distance*(-1);//获取移动块移动结束的坐标。
// 计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。
var change=end-start;//偏移量

var timer;//用计时器为图片添加动画效果
var t=0;
var maxT=30;
clear();//先把按钮状态清除,再让对应按钮改变状态
if(index==spanList.length){
spanList[0].className="selected";
}else {
spanList[index].className = "selected";
}

clearInterval(timer);//开启计时器前先把之前的清
timer=setInterval(function(){
t++;
if(t>=maxT){//当图片到达终点停止计时器
clearInterval(timer);
clickFlag=true;//当图片到达终点才能切换
}
inner.style.left=(change/maxT)*t+start+"px";//每个17毫秒让块移动
//alert(change/maxT*t);
if(index==spanList.length&&t>=maxT){
inner.style.left=0;
index=0;
//当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果
}
},17);
}

//编写图片向右滑动的函数
function forward(){
index++;
//当图片下标到最后一张把小标换0
if(index>spanList.length){
index=0;
}
AutoGo();
}

//编写图片向左滑动函数
function backward(){
index--;
//当图片下标到第一张让它返回到倒数第二张，
//left值要变到最后一张才不影响过渡效果
if(index<0){
index=spanList.length-1;
inner.style.left=(index+1)*Distance*(-1)+"px";
}
AutoGo();
}

//开启图片自动向右滑动的计时器
time=setInterval(forward,3000);

//设置鼠标悬停动画停止
wrap.onmouseover=function(){
clearInterval(time);
}
wrap.onmouseout=function(){
time=setInterval(forward,3000);
}

//遍历每个按钮让其切换到对应图片
for(var i=0;i<spanList.length;i++){
spanList[i].onclick=function(){
index=this.innerText-1;
AutoGo();
}
}

//左切换事件
left.onclick=function(){
if(clickFlag){
backward();
}
clickFlag=false; //点击结束后为什么立即会变成true？？？？？
}

//右切换事件
right.onclick=function(){
//alert(clickFlag);
if(clickFlag){
forward();
}
clickFlag=false; //点击结束后为什么立即会变成true？？？？？
}

//清除页面所有按钮状态颜色
function clear(){
for(var i=0;i<spanList.length;i++){
spanList[i].className="";
}
}
</script>

[microarea]

没人么？

[hongmei85]

html代码wrap这些是怎样的，能不呢发上来 clickFlag=false;之前不是调用backward();/forward();了吗。这里面AutoGo是17毫秒执行一次，过30*17毫秒就执行clickFlag=true;//当图片到达终点才能切换了

[microarea]

css和HTML见下面： <style rel="stylesheet" type="text/css"> *{ margin:0; padding:0; border:0; } .clear{ *zoom:1; } .clear:after{ visibility: hidden; content:""; display:block; clear:both; height:0; } #wrap{ width: 510px; height:286px; margin:0 auto; position:relative; background: pink; overflow: hidden;} #inner{ width: 1000%; height:100%; position:absolute; left:0; top:0;} #inner img{ width:10%; height:100%; float: left; } .paganation{ width: 100%; position: absolute; bottom:10px; text-align:center; } .paganation span{ padding:5px 8px; background: #F2F2F2; color:red; border-radius:50%; cursor: pointer } .paganation .selected{ background: red; color:white; } .arrow{ position:absolute; top:0; width: 30px; height: 286px; line-height: 286px; text-align: center; color: red; cursor: pointer; } #right{ right: 0; } .arrow:hover{ background: rgba(0,0,0,0.5); } </style> <div id="wrap"><!-- 图片展示区 --> <div id="inner" class="clear"><!-- 所有图片并排的块 --> <img style="background:red;" src="imges/imges/1.jpg" alt=""> <img style="background:orange;" src="imges/imges/2.jpg" alt=""> <img style="background:green;" src="imges/imges/3.jpg" alt=""> <img style="background:cyan;" src="imges/imges/4.jpg" alt=""> <img style="background:yellow;" src="imges/imges/5.jpg" alt=""> <img style="background:purple;" src="imges/imges/6.jpg" alt=""> <img style="background:pink;" src="imges/imges/7.jpg" alt=""> <img style="background:blue;" src="imges/imges/8.jpg" alt=""> <img style="background:red;" src="imges/imges/1.jpg" alt=""> </div> <div class="paganation" id="paganation"><!-- 页面按钮区域 --> <span class ="selected">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> </div> <div id="left" class="arrow"><</div><!-- 向左切换按钮 --> <div id="right" class="arrow">></div><!-- 向右切换按钮 --> </div>

[microarea]

引用 2 楼 hongmei85 的回复:

html代码wrap这些是怎样的，能不呢发上来 clickFlag=false;之前不是调用backward();/forward();了吗。这里面AutoGo是17毫秒执行一次，过30*17毫秒就执行clickFlag=true;//当图片到达终点才能切换了

但是调用backward();/forward();后左右点击事件的最后一步不是clickFlag=false么？点击结束后clickFlag应该是false吧？但再点击的话还是会生效，说明clickFlag已经变成true了，不知道什么时候变成true的……