*?{?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>我想做圖片輪播的效果，移動還沒寫，現(xiàn)在跳轉(zhuǎn)的下標(biāo)我不知道怎么處理。 想要的效果是點擊ol的哪一個標(biāo)簽，ul的li也是對應(yīng)的哪個
想做圖片輪播，
依韻S1
2016-12-22 15:17:26