                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /焦点图轮播特效

为什么判断语句写在点击事件函数体内没有效果？如果要写在点击事件函数体内该怎样写？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{margin:0;padding:0;text-decoration:none;}
			body{padding:20px}
			#container{width:600px;height:400px;border:3px solid #333;overflow:hidden;position:relative;margin:0 auto;}
			#list{width:4200px;height:400px;position:absolute;z-index:1;}
			#list img{float:left;}
			#buttons{position:absolute;width:100px;height:10px;bottom:20px;left:250px;z-index:2;}
			#buttons span{cursor:pointer;display:block;float:left;width:10px;height:10px;border:1px solid #FFF;border-radius:50%;background:#333;margin-right:5px;}
			.arrow{position:absolute;display:none;width:40px;height:40px;line-height:40px;z-index:2;font-size:36px;text-align:center;font-weight:bold;top:180px;background-color:rgba(0,0,0,.3);color:#FFF;}
			#prev{left:20px;}
			#next{right:20px;}
			#container:hover .arrow{display:block;}
			.arrow:hover{background-color:rgba(0,0,0,.7);}
		</style>
		<script>
			window.onload = function(){
				var container = document.getElementById('container');
				var list      = document.getElementById('list');
				var buttons   = document.getElementById('buttons').getElementsByTagName('span');
				var prev      = document.getElementById('prev');
				var next      = document.getElementById('next');
			
				function animate(offset){
					list.style.left=parseInt(list.style.left)+offset+'px';
					
				}
				next.onclick = function(){
					animate(-600);
					if(list.style.left<-3000){
						list.style.left=-600+'px';
					}
				}
				prev.onclick =function(){
					animate(600);
					if(list.style.left>-600){
						list.style.left=-3000+'px';
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="container">
			<div id="list" style="left:-600px">
				<img src="img/5.jpg" alt="" title="">
				<img src="img/1.jpg" alt="" title="">
				<img src="img/2.jpg" alt="" title="">
				<img src="img/3.jpg" alt="" title="">
				<img src="img/4.jpg" alt="" title="">
				<img src="img/5.jpg" alt="" title="">
				<img src="img/1.jpg" alt="" title="">
			</div>
			<div id="buttons">
				<span index="1" class="on"></span>
				<span index="2" class=""></span>
				<span index="3" class=""></span>
				<span index="4" class=""></span>
				<span index="5" class=""></span>	
			</div>
			<a href="#" id="prev" class="arrow"><</a>
			<a href="#" id="next" class="arrow">></a>
		</div>
	</body>
</html>

慕数据5775487

2016-12-09

源自：焦点图轮播特效 4-1

关注问题我要回答

1273

操作

收起

2 回答

Pokeman 回答被采纳 +3 积分
2016-12-09

function showButton(){
    for(var i=0;i<buttons.length;i++){
        buttons[i].className='';
    }
    if(index>5){
	index=1;
    }
    if(index<1){
	index=5;
    }
    buttons[index].className='on';
}

我是这样写的，不过点击事件函数里面index+=1和index-=1应该放在showButton();前面，如下

next.onclick=function(){

animate(-720);

index+=1;

showButton();

}

prev.onclick=function(){

animate(720);

index-=1;

showButton();

}