轮播图中 需注意的问题 及底部小圆点写法

注意的问题

1.包裹图片的ul宽度为轮播图片数量加一的宽度

2.小圆点在底部距中，要让ul的display为inline-block，这样，li会撑开ul，此时再给ul加背景颜色不会是充满一行的。

3.要给ul设置font-size：0；，否则li会在ul中向下偏移

小圆点html结构

<div class="circle">
     <ul class="cirbox">
         <li class = 'active'></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
</div>

小圆点css样式：

/* 底部圆点 */
.circle{
    position: absolute;
    bottom: 10px;
    width:100%;
    text-align: center;
    height: 14px;
}
.circle .cirbox{
    display: inline-block;
    background:rgba(100, 100, 100, 0.5);
    border-radius: 7px;
    font-size: 0; /*不加这一句，会使li在ul中向下偏移*/
}
.circle .cirbox li{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    margin: 2px;
}
.circle .cirbox .active{
    background: #ff5000;
}

效果图：

带有交互的

html部分

<div class="banner">

    <ul class="imgList">
            <li><img src="banner/1.png"/></li>
            <li><img src="banner/2.jpg"/></li>
            <li><img src="banner/3.jpg"/></li>
            <li><img src="banner/4.jpg"/></li>

    </ul>
    <div class="circle">
            <!-- <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a> -->
    </div>
</div>

CSS部分

*{
        padding: 0px;
        margin: 0px;
}
.banner{
     width: 600px;
     margin: auto;
     border: 10px solid green;
     height: 350px;
     position: relative;
     overflow: hidden;
}
.imgList img{
     width: 600px;
     height: 350px;
}
.imgList{
    /* 绝对定位 */
     position: absolute;
    /* left:-600px; */
    /* width: 2600px; */
}
.imgList li{
     float:left;
     margin-right: 20px;
     list-style: none;
}
.circle{
    position: absolute;
    bottom: 15px;left:50%;
    transform:translateX(-50%);
 }
.circle a{
     width: 15px;
     height: 15px;
     background: green;
     display: block;
     border-radius: 50%;
     opacity: .8;
     float: left;
     margin-right: 10px;
}
.circle a.hover{
     background: black;
     opacity: .7;
}

JS 部分

<!-- 实现 点击小圆点 图片滑动  小圆点样式改变 -->
<script type="text/javascript">
// 确定ul的宽度 动态的创建小圆点
var imgList = document.querySelector('.imgList');
var circle = document.querySelector('.circle');
var circleA = circle.children;
// thisIndex默认索引值是0
var thisIndex = 0;
// console.log(imgList.children.length);
// window.onload延迟加载函数
window.onload = function(){
    //给ui标签设置宽度
     imgList.style.width =imgList.children.length*620+'px';

     //下面动态创建a标签
     for (var i = 0; i < imgList.children.length; i++) {
            var aNode = document.createElement('a');

            //我们在这里创建index属性来记录索引值
            aNode.setAttribute('index',i);
            circle.appendChild(aNode);
     }
     //给小圆点加点击事件
    circle.addEventListener('click',function(e){

      //这里给a标签点击事件有个小bug 就是我们鼠标点击到.circle标签时候图片也滑动了 
            //解决上面小bug的方法
            if(e.target.nodeName !='A'){
                    return false;
            }

            // e.target指向的是a标签
            console.log(e.target);
            // console.log(e.target.nodeName);
            // 获得索引值
             thisIndex = e.target.getAttribute('index');
            // console.log(thisIndex);
            //图片移动的规则 0索引值 ->0  1 ->-1*620  2 ->-2*620 
            imgList.style.left = -thisIndex*620+'px';

            //调用小圆点改变样式的函数
            circlechange();
    })

    function circlechange(){
            //先清除样式 再添加样式
            for (var i = 0; i <circleA.length; i++) {
                    circleA[i].className = '';
            }
            circleA[thisIndex].className = 'hover';
    }				
}					
</script>