这是我参与「第四届青训营」笔记创作活动的的第1天

JS轮播图（自动、点击）

效果图：

html代码

    <div class="box">
        
        <ul class="list" id="list">
            <li class="item active"><img src="./png1.jpg" alt=""></li>
            <li class="item"><img src="./png2.jpg" alt=""></li>
            <li class="item"><img src="./png3.jpg" alt=""></li>
        </ul>
        <ul class="buttonList">
            <li class="button active" data-index="0"></li>
            <li class="button" data-index="1"></li>
            <li class="button" data-index="2"></li>
        </ul>
    </div>

语法语义详解：

<ul>标签定义无序列表。
将该轮播图看做一个盒子，定义宽高，统一图片大小
轮播图片看做一个整体，轮播2小圆点看做一个整体，小圆点浮动于盒子右下角
第一个图片<li>和第一个圆点的<li>的class值多加了active，代表刚开始时默认选中图片为第一张图片，即方便添加特殊样式以区分

css代码


*{
            margin: 0;
            padding: 0;
        }
        .list{
            width: 650px;
            height: 400px;
            list-style: none;
            position: relative;
        }
        .list img{
            width: 650px;
            height: 400px;
        }
        .box{
            width: 650px;
            height: 400px;
            position: relative;
        }
        .item{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        
        .item.active{
            opacity: 1;
            z-index: 10;
        }
        .buttonList{
            padding-left: 0px;
            list-style: none;
            position: absolute;
            right:25px;
            bottom: 20px;
            z-index: 1000;
        }
        .button{
            width: 8px;
            height: 8px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 100%;
            float: left;
            margin-right: 15px;
            border-style: solid ;
            border-width: 2px;
            border-color: rgba(255,255,255,0.6);
            cursor: pointer;       
        }
        .button.active{
            background-color: rgba(255, 255, 255, 0.4);
        }

语法语义详解：

轮播圆点块用"子绝父相"定位 position: relative; position: absolute;
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
opacity 属性设置或返回元素的不透明度。当不透明度为 1 时表示完全不透明，当不透明度为 0.5 时表示半透明，当不透明度为 0 时表示完全透明。

js代码

    var items = document.getElementsByClassName('item');
    var buttons=document.getElementsByClassName('button');
    var index=0;
    var time=0;

    var clearActive = function(){
        for(var i=0;i<items.length;i++){
            items[i].className='item';
        }
        for(var i=0;i<buttons.length;i++){
            buttons[i].className='button';
        }
    }
    var goIndex =function(){
        clearActive();
        items[index].className='item active';
        buttons[index].className='button active';

    }
    var goNext =function(){
        if(index<2){
            index++;
        }else {
            index=0;
        }
        goIndex();
        
    }
    for(var i=0;i<buttons.length;i++){
        buttons[i].addEventListener('click',function(){
            var buttonIndex = this.getAttribute('data-index');
            index = buttonIndex;
            goIndex();
            time =0;
        })
    }
    setInterval(function(){
            time++;
            if(time==20){
                goNext();
                time=0;   
            }
        },100)

语法语义详解：

var items = document.getElementsByClassName('item');使用class值获取图片数组，圆点同上
clearActive函数表示清除图片和原点的active属性
goIdex函数表示选中下标为index的图片和圆点
goNext函数表示选中下一张图片
for循环遍历小圆点下标，为每一个小圆点添加点击事件，getAttribute方法获取当前图片序号，赋值给index,调用goIndex，完成点击圆点实现图片切换
setInterval为定时器，2秒实现一次自由轮播。防止随意迅速点击切换导致画面不流畅，采用了一个if语句，定时器为0.1秒，time初始为0，time要达到20即定时器运行20次也就是2秒后切换下一张图片。for语句中添加time=0语句的好处是不管连续点击几次，都能实现2秒切换的稳定时长，达到画面稳定流畅。

JS完整轮播图 | 青训营笔记

JS轮播图（自动、点击）

效果图：

html代码

css代码

js代码