我想让圆点随着图片增加而增加，然后怎加了代码，完整代码如下，老师给看一下这样子写是否规范？
// 封装一个代替getElementById()的方法
function byId( id ){
return typeof(id) === 'string'? document.getElementById(id): id;
}
// 全局变量
var main = byId('main'),
bannerBox = byId('bannerBox'),
oLi = bannerBox.getElementsByTagName('li'),
liLen = oLi.length,
prev = byId('prev'),
next = byId('next'),
dots = byId('dots'),
dotSpan = null,
index = 0,
timer = null;
function slideImg(){
// 自动添加dots下的span
for( var i=0; i<liLen; i++ ){
dots.innerHTML += '<span></span>';
dotSpan = dots.getElementsByTagName('span');
}
// 利用间歇调用，实现自动切换图片
function autoChange(){
timer = setInterval(function(){
// 判断索引值
index++;
if( index>=liLen ){
index = 0;
}
// 调用切换图片函数
changeImg();
},3000)
}
autoChange();
// 鼠标划过main，清除定时器
main.onmouseover = function(){
// 清除定时器
if( timer ){ clearInterval( timer ); }
}
// 鼠标离开，启动定时器，开始切换图片
main.onmouseout = autoChange;
// 遍历所有圆点，且绑定点击事件，点击圆点切换图片
for( var j=0; j<liLen; j++ ){
dotSpan[0].className = 'active';
// 给所有span添加一个id的属性，值为j，作为当前span的索引
dotSpan[j].id = j;
dotSpan[j].onclick = function(){
index = this.id;
// 调用changeImg函数，切换图片
changeImg();
}
}
// 下一张
next.onclick = function(){
index++;
if( index>=liLen ){
index=0;
}
changeImg();
}
// 上一张
prev.onclick = function(){
index--;
if( index<0){
index= liLen-1;
}
changeImg();
}
}
function changeImg(){
for( var i=0; i<liLen; i++ ){
oLi[i].style.display = 'none';
dotSpan[i].className = '';
}
oLi[index].style.display = 'block';
dotSpan[index].className = 'active';
}
slideImg();16
收起
正在回答
4回答
你好，经测试，实现的效果很好，想法也很棒，继续加油！
祝学习愉快~
桔七
2018-01-28 12:50:17
@charset "utf-8";
/* reset */
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
body{
font-family: "微软雅黑";
color: #14191e;
}
/* main */
.main{
width: 1200px;
height: 460px;
margin: 50px auto;
overflow: hidden;
}
/* banner */
.banner,.banner ul{
width: 1200px;
height: 460px;
position: relative;
}
.banner-imgs li{
position: absolute;
display: none;
}
.banner-imgs li.active{
display: block;
}
.btn{
width: 40px;
height: 80px;
position: absolute;
top: 50%;
left: 244px;
margin-top: -40px;
background: #f00;
background: url(../img/arrow.png) no-repeat center;
}
.btn:hover{
background-color: #333;
opacity: 0.8;
filter: alpha(opacity=80);
}
.prev{
left: 244px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.next{
right: 0;
left: auto;
}
.dots{
position: absolute;
right: 20px;
bottom: 24px;
text-align: right;
font-size: 0;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(7,17,27,0.4);
box-sizing: border-box;
border: 1px solid #fff;
cursor: pointer;
margin: 4px;
}
.dots span:hover,
.dots span.active{
background-color: #fff;
border-color: rgba(7,17,27,0.4);
}和HTML
<div class="main" id="main"> <!-- 图片轮播 --> <div class="banner"> <!-- 图片盒子 --> <ul class="banner-imgs" id="bannerBox"> <li class="active"> <a href="" class="active"> <img src="img/bg1.jpg" alt=""/> </a> </li> <li> <a href=""> <img src="img/bg2.jpg" alt=""/> </a> </li> <li> <a href=""> <img src="img/bg3.jpg" alt=""/> </a> </li> <li> <a href=""> <img src="img/bg2.jpg" alt=""/> </a> </li> <li> <a href=""> <img src="img/bg3.jpg" alt=""/> </a> </li> </ul> <!-- 左右箭头 --> <a href="javascript:void(0);" class="btn prev" id="prev"></a> <a href="javascript:void(0);" class="btn next" id="next"></a> <!-- 圆点按钮 --> <div class="dots" id="dots"> <!--<span class="active"></span> <span></span> <span></span>--> </div> </div> </div>
相似问题
登录后可查看更多问答，登录/注册
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星