想做图片轮播，

Question

* { padding:0; margin:0; }
		.wrap { position:relative; width:1200px; height:400px; margin:0 auto; overflow:hidden; }
		.wrap ul { position:absolute; left:0; top:0; list-style:none; width:99999px; overflow:hidden; }
		.wrap ul li { width:1200px; height:400px; float:left; }
		.wrap ol { list-style:none; position:absolute; left:50%; bottom:10px; width:90px; margin-left:-45px; }
		.wrap ol li { width:20px; height:20px; border-radius:555px; background-color:#000; float:left; margin:0 5px; }
		.wrap ol .on { background-color:#fff; }
		.wrap .js-btn-left { width:30px; height:40px; position:absolute; top:50%; left:20px; background-color:#000; }
		.wrap .js-btn-right { width:30px; height:40px; position:absolute; top:50%; right:20px; background-color:#000; }

<div class="wrap">
		<ul class="list">
			<li style="background-color:red;"></li>
			<li style="background-color:blue;"></li>
			<li style="background-color:#abcdef;"></li>
		</ul>
		<ol class="js-ol">
			<li class="on"></li>
			<li></li>
			<li></li>
		</ol>
		<span class="js-btn js-btn-left"></span>
		<span class="js-btn js-btn-right"></span>
	</div>

<script>
		window.onload=function(){
			var list = document.getElementsByClassName('list')[0];
			var btn = document.getElementsByClassName('js-ol')[0].getElementsByTagName('li');
			var index = 0;
			
			for(var i=0; i<btn.length; i++){
				index = i;
				btn[i].onclick=function(){
					for(var i=0; i<btn.length; i++){
						btn[i].className="";	
					}
					this.className="on";
					list.style.marginLeft= '-1200' * index   + 'px';
				}
				
			}
			
			
			
			
			
			
		}
	</script>

我想做图片轮播的效果，移动还没写，现在跳转的下标我不知道怎么处理。 想要的效果是点击ol的哪一个标签，ul的li也是对应的哪个