js轮播图（1）通过更改class实现

通过更改class实现

html部分

首先我们要给HTML的里标签添加一个class='current' 通过class变更来实现轮播的效果 小圆点同理
<div id="imglist" class="imglist">
        <ul >
            <li class='current'><img  src="图片路径" alt=""></li>
            <li><img class='img2' src="图片路径" alt=""></li>
        </ul>
    </div>

    <div class="dian" id='circle'>
        <ul>
            <li class='circle'></li>
            <li></li>
        </ul>
    </div>

js部分

// 获取元素
window.onload=function() {

	//首先我们需要先获取元素
    var imglist = document.getElementById('imglist').getElementsByTagName('li');
    var circlelis = document.getElementById('circle').getElementsByTagName('li')
    // 设置定时器
    var idx = 0;
    //定时器
    var timer = null;
    function fn1() {
        idx++;
        changePic()
    }
    timer = setInterval(fn1, 4000);

    //圆圈的批量监听
    for (var i = 0; i < circlelis.length; i++) {
        //绑定自定义属性
        circlelis[i].idxx = i;
        circlelis[i].onmouseover = function () {
            //鼠标接触圆圈，更改idx值；
            idx = this.idxx;
            远点切换的同时图片也切换
            changePic()
        }
    }

    function changePic() {
        //更改图片
        if (idx > imglist.length - 1) idx = 0;
        if (idx < 0) idx = imglist.length - 1;
        for (var i = 0; i < imglist.length; i++) {
            imglist[i].className = '';
        }
        imglist[idx].className = 'current';

        //更改圆点
        for (var i = 0; i < circlelis.length; i++) {
            circlelis[i].className = '';
        }
        circlelis[idx].className = 'circle';
    }
 }

css部分

我们还需要同过css样式来实现两张图片定位到相同的位置 以及一些样式的调试
#imglist li{
        position:absolute;
        left:0;
        top:0;
        display: none;
    }

    #imglist li .img2{
        width:105%;

    }

    #imglist li img{
        height:800px;
    }


    #imglist .current {
        display: block;
    }


    .dian {
        width: 50px;
        position: absolute;
        left: 50%;
        margin-left: -18px;
        top: 750px;
    }

    .dian ul{
        width:200px;
    }
    .dian ul li {
        display: inline-block;
        width: 6px;
        height: 6px;
        border: 2px solid #fff;
        border-radius: 50%;
        margin:0 3px;
        float:left;
    }
    .dian ul .dian {
        background: white;
    }
    .dian ul li:hover {
        background: white;
    }