<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none; } .box { width: 490px; height: 170px; border: 1px solid #000000; margin: 100px auto; padding: 5px; position: relative; } .box .slider{ width: 100%; height: 100%; } .box .slider ul{ width: 100%; height: 100%; position: absolute; left: 5px; bottom: 0px; } .box .slider li{ position: absolute; top:5px; left: 490px; } .box ol{ text-align: center; } .box ol .btn{ width: 20px; height: 20px; border-radius:50%; background: #cccccc; display: inline-block; margin: 0 5px; cursor: pointer; overflow: hidden; } .box ol .btn.cur{ background: red; } </style></head><body><div class="box"> <div class="slider"> <ul> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li> <li><img src="images/03.jpg" alt=""></li> <li><img src="images/04.jpg" alt=""></li> <li><img src="images/05.jpg" alt=""></li> </ul> </div> <ol> <!--<li class="btn cur"></li> <li class="btn "></li> <li class="btn "></li> <li class="btn "></li> <li class="btn "></li>--> </ol></div></body></html><script src="gd.js"></script><script> var obox=document.querySelector(".box"); var slider=obox.querySelector(".slider"); var ali=slider.children[0].querySelectorAll("li"); var oOl=obox.querySelector("ol"); var oli=obox.children[1].children; init(); a(); //生成圆点 function init() { for (var i=0;i<ali.length;i++) { var oli= document.createElement("li"); //oli.innerHTML= oli.length;添加文本 oOl.insertBefore(oli,oOl.children[0]); oli.setAttribute("class","btn") } oOl.children[0].className="btn cur"; ali[0].style.left= "0px"; } //轮播 function a() { oli.onclick=function(){ for(var i=0;i<oli.length;i++) { oli[i].className = "btn"; } oli[i].className = "btn cur"; } }</script>
1 回答
已采纳
千秋此意
TA贡献158条经验 获得超187个赞
function a() {
for (var i = 0; i < oli.length; i++) {
oli[i].onclick = function(iNow) {
return function() {
for (var i = 0; i < oli.length; i++) {
oli[i].className = "btn";
}
oli[iNow].className = "btn cur";
}
}(i);
}
}函数a这样写小圆点就能动了（没素材其他地方我没改）
添加回答
举报
0/150
提交
取消