急求急求，怎么轮播小圆点按钮点击的位置改变不了
<!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>
qq_10_111回答
-
千秋此意
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这样写小圆点就能动了（没素材其他地方我没改） -
慕瓜9220888
VQFQCVLDDNRPUMPVISMDIHZYBUKLGWMJGSSCFUJPELOEFETPHPZWJXDTRAYEXGJPIRQOYVOHECEKAJJCGSMYQIIBRHYPECLKTGWTBWBGTJMPKTPKSVFBBITVHSPBIEKIBTCZIVSZAIXYSIOBHIGHFIBEYVWKJUBNXUXFXFRBUHAUBRGVHQNJNKPBWCSFOEPKGOHALBSPYIXTTZAZAWRTCJSGRPKCOUEYSRORXGNKBZEIESEEAQQXEJBGZYHZLZRSKGWWSTONSDNQCMMBGHJCMWZFXVTPLZCPOZHWSZCBOYPKJONNDTABQYMILYLDODXMVBKDZLGYQADJQGDMAPIRBEZNPNWMCVYWDCEZWANTRCXWYHKXKSNLDFCSLOLCAMNXWMVBCGFBOTPPODMUIIORKLZVNSJNJWALDNBIRRUUIACAUUGDWRTMYVMTGNAQFDEHDRTXDTVULRCLZIHZMZMQGRTCAXGKRIXQEJQZSVQIHMBTSBHETEWIXRNXLTVAYIOHQJHNPHGATSECMRJDFISJKDRZJZSEEDIOMQUOKXVIGIIKUKCNFNPEXAJDSXPAEAAKJUMYDAZMVJDMNMSDWMWOCRTQZCLBMKFHQKMQHBNIUKWWJWOAOHIYKEUPHTPMPIHLCKENWIBOZYTVNTMZPIGXPIHRAQDUJWEDNMGECUPXQMMPXMKPLEAXGQEMUMOXNQXOTSXQFYSZNMUCMBBRNRMKPPOHYASELCNXEGVHPRHKKQKSJGIRROFVOPPBMWVBCMRDSOVVYPNENOJQGZIJKIRWPEWJKGYWBLUTAPWVJVUUNDECACBYLBTQUJHYHQWMNYMVTCZCEIPOQIRRXHIPXPEHWJEDODBQWFSREVTSKTWYRTNCNBVKKKKSJSDGPJCHUTIXQJCKARWUWJATJZNLKFBLUHGQWVGWMVSTUJRZPOBMDNCRPFWPGQOWKCZTZJITIOTXUABJUCABKDXDTRZHXXQZGYVXCAWSPSXEMUMCIBBXVALBERANUBTIUPVSROLKSQJPSZAIQONDVFYDHJECVEKHSTSDDTCCPGFKLGPVVRPGOXLREDDNBTBZJVYIZHVNPBKMVNKJXPIKDMPINSZLRKNAGOXVVKEHQUSATCFEYLMHFUJMCYYMUMLYORDOVKOXWZPOCJBWSJZILFACHDQXKOXBWVTMWZIRPNUIVREBVJBGRXXGDWAIGVONTJPKMKJFSLUJGYQYYGZPPWOVDDMFVFWELJTCIFEYKNCFEYHTEJTBXHQGDVAPVSVVMOPESHUNAFTKSHPVYYRLJEMEWYOOOSFUCFVYLVTYWSVREFMDCHVSBBBYGBMYBAQZWKIUICRLTICXZYXXGVXLJONGPYNRSRPLRZLOQOWVJZUXQRLKPNNCPMHIQFNNMWZLCRTCVENADNLAZSRBNKUPLMFVNZAKTHCOAWWBKSAGZOYUMQSQFVMJSJHMVKTMFFBMECHKQTTHXMOGWZYBPDVDISLUKTKQENWORKPNECLUDAQMQJUMFPOEPGIDBLWFSEHTRMPVOLNUAONMGZCNEGBATSYRITFKFPFRRWTJVYUYLMLJYQSRBNQVRJHQMCLYOVRJYEXWZDLNRQTJLLFDFRPSLEXKSAZANDUR
随时随地看视频慕课网APP
相关分类
JavaScript