请问 这个轮播图代码 怎么多添加几个图片几个小圆点。代码如下：
<!doctypehtml><html><head><metacharset="utf-8"><title>原生js轮播图</title></head><style>*{...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生js轮播图</title>
</head>
<style>
*{ margin:0; padding:0;}
html,body{ width:100%}
.banner{ width:1000px;/* 图片总属性*/
height:480px;
margin:100px auto;/*auto居中*/
position:relative;
overflow:hidden;}/*四张图片隐藏溢出（隐藏三张）*/
.banner ul{ list-style:none;/*取消列表前点*/
position:absolute;}
.banner ul li{float:left;}/*图片左移*/
#banner_img{width:4000px;/*图片总宽度*/
left:0px;/*距离左边*/
transition:left 0.5s ease-out;}/*点击触发，向左*/
#banner_img li{background:center no-repeat;
width:25%;
height:480px;
background-size:cover;}/*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/
#banner_btn{width:130px;
left:400px;
top:400px;}
#banner_btn li{width:16px;
height:16px;
margin-left:10px;
border-radius:50%;/*添加圆角边框*/
border:2px solid #FFF;}/*边框大小 实线 颜色*/
.curr{ background-color:#FF4500;}/*圆点颜色*/
</style>
<script>
window.onload=function(){/*执行函数*/
oBanner_btn=document.getElementById("banner_btn");
oBanner_img=document.getElementById("banner_img");
aLi=oBanner_btn.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++)/*for循坏执行点击跳转*/
{ aLi[i].onmouseover=function()
{ for(var i=0;i<aLi.length;i++)
{aLi[i].index=i;
aLi[i].className="";}
oBanner_img.style.left=-1000*this.index+"px";
this.className="curr";
}
}
}
</script>
<body>
<div class="banner">
<ul id="banner_img">
<li style="background-image:url(images/1.jpg)"></li>
<li style="background-image:url(images/2.jpg)"></li>
<li style="background-image:url(images/3.jpg)"></li>
<li style="background-image:url(images/4.jpg)"></li>
</ul>
<ul id="banner_btn">
<li class="curr"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
以上全部代码在此。我知道大概在for循环那里改 ，但还是改不对，没看懂！
这是4张图4个点 我想多加图片但是点多不了！ 展开
<html>
<head>
<meta charset="utf-8">
<title>原生js轮播图</title>
</head>
<style>
*{ margin:0; padding:0;}
html,body{ width:100%}
.banner{ width:1000px;/* 图片总属性*/
height:480px;
margin:100px auto;/*auto居中*/
position:relative;
overflow:hidden;}/*四张图片隐藏溢出（隐藏三张）*/
.banner ul{ list-style:none;/*取消列表前点*/
position:absolute;}
.banner ul li{float:left;}/*图片左移*/
#banner_img{width:4000px;/*图片总宽度*/
left:0px;/*距离左边*/
transition:left 0.5s ease-out;}/*点击触发，向左*/
#banner_img li{background:center no-repeat;
width:25%;
height:480px;
background-size:cover;}/*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/
#banner_btn{width:130px;
left:400px;
top:400px;}
#banner_btn li{width:16px;
height:16px;
margin-left:10px;
border-radius:50%;/*添加圆角边框*/
border:2px solid #FFF;}/*边框大小 实线 颜色*/
.curr{ background-color:#FF4500;}/*圆点颜色*/
</style>
<script>
window.onload=function(){/*执行函数*/
oBanner_btn=document.getElementById("banner_btn");
oBanner_img=document.getElementById("banner_img");
aLi=oBanner_btn.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++)/*for循坏执行点击跳转*/
{ aLi[i].onmouseover=function()
{ for(var i=0;i<aLi.length;i++)
{aLi[i].index=i;
aLi[i].className="";}
oBanner_img.style.left=-1000*this.index+"px";
this.className="curr";
}
}
}
</script>
<body>
<div class="banner">
<ul id="banner_img">
<li style="background-image:url(images/1.jpg)"></li>
<li style="background-image:url(images/2.jpg)"></li>
<li style="background-image:url(images/3.jpg)"></li>
<li style="background-image:url(images/4.jpg)"></li>
</ul>
<ul id="banner_btn">
<li class="curr"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
以上全部代码在此。我知道大概在for循环那里改 ，但还是改不对，没看懂！
这是4张图4个点 我想多加图片但是点多不了！ 展开
2个回答
展开全部
<ul id="banner_btn">里面也要相应加个<li></li>
更多追问追答
追问
比如怎么加？！能写出来吗！感谢
比如怎么加？！能写出来吗！感谢
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
