不知道错哪里了，求大神指点，图片会乱闪之后浏览器崩溃！-慕课网

不知道错哪里了，求大神指点，图片会乱闪之后浏览器崩溃！

来源：6-1 动画函数

慕数据5775487

2016-12-10 19:56

<!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;}
			#buttons .on {  background: orange;}
			.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');
				var index=1;
				
				function showButton(){
					for (var i = 0; i < buttons.length ; i++) {
	                    if( buttons[i].className == 'on'){
	                        buttons[i].className = '';
	                        break;
	                    }
               		}
					buttons[index - 1].className = 'on';
				}
				
				function  animate(offset){
					var newLeft=parseInt(list.style.left)+offset;
					var time = 300;
					var interval = 10;
					var speed = offset/(time/interval);
					
					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';
							setInterval(go,interval);
						}else{
							list.style.left=newLeft+'px';
							if(newLeft<-3000){
								list.style.left = -600+'px';
							}
							if(newLeft>-600){
								list.style.left = -3000+'px';
							}
						}
					}
					go();
					
					
				}
				
				next.onclick= function(){
					if(index==5){
						index=1;
					}else{
						index+=1;
					}
					showButton();
					animate(-600);	
				}
				prev.onclick=function(){
					if(index==1){
						index=5;
					}else{
						index-=1;
					}
					showButton();
					animate(600);	
				}
				
				for(var i=0;i<buttons.length;i++){
					buttons[i].onclick=function(){
						if(this.className=='on'){
							return;
						}
						var myindex=parseInt(this.getAttribute('index'));
						var om=-600*(myindex-index);
						animate(om);
						index=myindex;
						showButton();
						
					}
				}
				
				
				
		}	
		</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>

写回答关注

1回答

慕数据5775487

2016-12-10 23:49:19

找到原因了，计时器用错了

0 0

焦点图轮播特效

通过本教程学习您将能掌握非常实用的焦点图轮播特效的制作过程

65279 学习 · 611 问题

查看课程

相似问题

焦点图轮播定时器清除不了....求大牛指点

回答 2

不知道什么错误，切换图片函数换了后不能切了

回答 2

为什么实现不了，求大神指教

回答 1

大神求指点，index获取不到alert到的值是NaN

回答 2

图像轮播问题，一直想不通，望大神指点

回答 1

打开慕课网App查看更多内容