<!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(); //生成圓點(diǎn) 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>
急求急求，怎么輪播小圓點(diǎn)按鈕點(diǎn)擊的位置改變不了
qq_10_11
2017-04-09 21:03:06
