看了老师的课件，自己做了个轮播DEMO，位移切换这边停顿了！

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>焦点图轮播</title>
</head>
<style type="text/css">
	.box{width: 500px;height: 300px;border:solid 3px #000;position: relative; /*overflow: hidden;*/}
	.box .list{width: 2000px; height: 500px; position: absolute; left:0;}
	.banner{width: 500px;height: 300px; float: left;}
	.list .b1{background:url(img/b1.jpg) #333;}
	.list .b2{background:url(img/b2.jpg) #ccc;}
	.list .b3{background:url(img/b3.jpg) #666;}
	.list .b4{background:url(img/b4.jpg) #999;}
	.box .btn{width: 500px; height: 20px; text-align: center; position: absolute; bottom: 10px; }
	.btn span{width: 10px;height: 10px;cursor: pointer; background-color: #000; display:inline-block; padding: 0 0 5px 0;}
	.btn .on{background-color: red;}
</style>
<body>
<div class="box" id="box">	
	<div class="list" id="list">
		<div class="banner b1" data-index="0"></div>
		<div class="banner b2" data-index="1"></div>
		<div class="banner b3" data-index="2"></div>
		<div class="banner b4" data-index="3"></div>
	</div>
	<div class="btn" id="btn">
		<span class="on" data-index="0"></span><!--  0 -->
		<span data-index="1"></span><!--  500	 -->
		<span data-index="2"></span><!-- 	1000 -->
		<span data-index="3"></span>	<!-- 1500 -->
	</div>
</div>
<script type="text/javascript">
	var $=function(id){
		return document.getElementById(id);
	}
	var getStyle=function(obj,attr){
		return obj.currentStyle?obj.currentStyle['attr']:getComputedStyle(obj)[attr];
	}
	var box=$("box");
	var list=$("list");
	var btn=$("btn");
	var span=btn.getElementsByTagName('span');
	var timer=null;
	for(var i=0;i<span.length;i++){	
		// span[i].index=i;
		span[i].onclick=function(){	 //1.布局好后首先从span点击事件开始做判断
			start(this);
		}
	}
	function start(obj){
		//查询旧的红色对应索引值
		for(var k=0;k<span.length;k++){	
			if(span[k].className=="on"){
				oldIndex=span[k].dataset.index;
			}
		}
		//获取点击变成红色的对应索引值
		newIndex=obj.getAttribute("data-index"); 	
		var offset=(newIndex-oldIndex)*500;

		//清除重复计算
		if(obj.className=="on"){
			return 0;
		}
		// 让当前正方形显示红色
		for(var j=0;j<span.length;j++){
			if(span[j].className=="on"){
				span[j].className="";
				break;
			}
		}
		if(obj.className==""){
			obj.className="on";
		}else{
			obj.className="";			
		}	
		Move(offset);
	}	

	function Move(offset){	
		
		var go=function(){
			if(parseInt(getStyle(list,"left"))<-1500){
				list.style.left=0;
			}else{	
				// speed+=100;
				//list.style.left=parseInt(getStyle(list,"left"))-speed+"px";
				list.style.left=parseInt(getStyle(list,"left"))-offset+"px";
			}
		}
		//go();	
		if(offset>0){
			// var speed=0;
			// if(speed>=offset){
			// 	clearTimerout(go);
			// }else{

			// 	setTimeout(go, 200);
			// }
			go();
			
		}else{
			go();
		}
	}
</script>
</body>
</html>


希望得到位移的解决方案！
同步MU
浏览 1646回答 0
0回答

随时随地看视频慕课网APP