CSS JavaScript综合——轮播图

HTML

1. 用一个最大的父级元素包括所有，父级元素相对定位
2. 多张图片设为列表

    <div class="wrap">
        <ul class="list">
            <li class="item active">0</li>
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
        </ul>
        <button class="btn" id="goPre"><</button>
        <button class="btn" id="goNext">></button>

        <!-- 通过data-index指定每个点对应的图片编号 -->
        <ul class="pointList">
            <li class="point active" data-index = "0"></li>
            <li class="point" data-index = "1"></li>
            <li class="point" data-index = "2"></li>
            <li class="point" data-index = "3"></li>
            <li class="point" data-index = "4"></li>
        </ul>
    </div>

CSS

1. 样式从父级元素开始设，个别有特殊的再单独设置
2. 遵从父相子绝

        .wrap{
            width: 800px;
            height: 400px;
            position: relative;	
        }
        .list{
            width: 800px;
            height: 400px;
            list-style: none;	/*去除list本身的样式*/
            position: relative;
            padding-left: 0px;	/*后面发现图片左边有空白，要去掉padding*/
        }
        .item{
            width: 100%;	/*尺寸按父级元素*/
            height: 100%;
            font-size: 2em;
            position: absolute;
            opacity: 0;		/*未active的图片是透明的*/
            transition: all .5s;	/*设置过渡效果从透明(未active)到不透明(active)*/
        }
        .item:nth-child(1){		/*伪类选择器获取子类*/
            background-color: rgb(216, 133, 133);
        }
        .item:nth-child(2){
            background-color: rgb(96, 96, 218);
        }
        .item:nth-child(3){
            background-color: rgb(135, 216, 212);
        }
        .item:nth-child(4){
            background-color: rgb(214, 177, 108);
        }
        .item:nth-child(5){
            background-color: rgb(120, 206, 120);
        }

        .btn{
            height: 50px;
            width: 25px;
            position: absolute;
            top: 175px;
            z-index: 100;	/*用z-index排序*/
        }
        #goPre{
            left: 0;
        }
        #goNext{
            right: 0;
        }

        .item.active{
            z-index: 10;
            opacity: 1	/*显示出来的元素不透明*/
        }

        .pointList{
            list-style: none;
            padding-left: 0;
            z-index: 100;
            position: absolute;
            left: 345px;
            bottom: 10px;
        }
        .point{
            width: 10px;
            height: 10px;
            background-color: black;
            border-radius: 100%;
            float: left;        /*并排分布*/
            margin-left: 10px;
            cursor: pointer;    /*设置小手*/
        }
        .point.active{
            background-color: rgb(233, 217, 217);
        }

JS

1. 总的逻辑就是用index表示当前展示的图片编号，index的变化（左右按钮是点击使inde++或–；点是根据当前点击点对应的index）改变对应索引图片的className，设置成active类名的图片用z-index:10放在最上面。
2. 不同逻辑的执行都封装成函数，方便调用，如clearActive，goIndex
3. 注意addEventListener的使用方法，function参数要用匿名函数执行。以及和onclick的区别

        var items = document.getElementsByClassName("item")
        var points = document.getElementsByClassName("point")
        var goPreBtn = document.getElementById("goPre")
        var goNextBtn = document.getElementById("goNext")
        var index = 0
        var time = 0    // 轮播图定时器参数

        // 还原所有类的类名，去除active
        var clearActive = function(){
            for(var i = 0; i < items.length; i++){
                items[i].className = "item"
            }
            for(var i = 0; i < points.length; i++){
                points[i].className = "point"
            }
        }
        
        // 把当前index的图片设为active
        var goIndex = function(){   //不用传入index，因为index是全局变量
            clearActive()
            console.log(index)
            items[index].className = "item active"
            points[index].className = "point active"
        }

        // active上一张图片
        var goPre = function(){
            if(index == 0){
                index = 4
            }else{
                index--
            }          
            goIndex()
        }

        // active下一张图片
        var goNext = function(){
            if(index == 4){
                index = 0
            }else{
                index++
            }
            goIndex()
        }

        // 把函数绑定到按钮上
        goNextBtn.addEventListener("click", function(){
            goNext()
        })
        goPreBtn.addEventListener("click", function(){
            goPre()
        })
        
        for(let i = 0; i < points.length; i++){
            points[i].addEventListener("click", function(){
                var pointIndex = this.getAttribute("data-index")   // 获取点对应的图片编号
                index = pointIndex          // 再调用goIndex()
                goIndex()
                time = 0    // 点击point之后自动轮播重新计时
            })
        }

        // 设置自动轮播time每0.2s增加1，用4s时间增加到20，然后goNext轮播下一张
        setInterval(function(){
            time++      
            if(time == 20){
                goNext()
                time = 0
            }
        },200)

参考
js常用项目之轮播图