想做图片轮播，

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也是对应的哪个