JavaScript_自动轮播图

JavaScript_自动轮播图

源码下载链接

效果如下，动态效果请自行运行

代码如下

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
    .wrap{
        width: 800px;
        height: 400px;
        position: relative;
    }
    .list{
        width: 800px;
        height: 400px;
        list-style: none;
        position: relative;
        /* position: relative（相对定位）：相对定位是相对于元素在文档中的初始位置。 */
        padding-left: 0px;
    }
    .item{
        width: 100%;
        height: 100%;
        color: white;
        font-size: 50px;
        position: absolute;
        /* position: absolute（绝对定位）：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。 */
        opacity: 0;
        transition: all 2s;
    }
    .item:nth-child(1){
        background-color: black;
        /* opacity: 1; */
        /* 使用BlankProblemHandler()取消此处注释 */
    }
    .item:nth-child(2){
        background-color: red;
    }
    .item:nth-child(3){
        background-color: yellow;
    }
    .item:nth-child(4){
        background-color: green;
    }
    .item:nth-child(5){
        background-color: pink;
    }
    .btn{
        width: 50px;
        height: 100px;
        position: absolute;
        top: 150px;
        z-index: 20;
    }
    #goPre{
        left: 0px;
    }
    #goNext{
        right: 0px;
    }

    .item.active{
        z-index: 10;
        /* 同时具有item和active类名，z轴高度为100，即显示在最上方 */
        opacity: 1;
    }
    .pointList{
        padding-left: 0px;
        list-style: none;
        position: absolute;
        right: 20px;
        bottom: 20px;
        z-index: 100;
        /* 小圆点序列高度确保在图片之上 */
    }
    .point{
        width: 10px;
        height: 10px;
        background-color: rgb(0,0,0,0.4);
        border-radius: 100%;
        float: left;
        margin-right: 14px;
        z-index: 300;
        border-style: solid;
        border-width: 2px;
        border-color: rgba(255,255,255,0.6);

        cursor: pointer;
        /* 鼠标移上时变为小手指 */
    }
    .point.active{
        background-color: rgb(255,255,255,0.2);
    }
</style>




    <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>
        <ul class="pointList">
            <!-- 在标签中存数据 data- -->
            <li class="point" data-index="0"></li> 
            <!-- <li class="point" data-index="0"></li>  -->
            <!-- 若默认第一张图片不激活时，请启用JS中的BlankProblemHandler函数，同时，启用goNext()和goPre()对BlankProblemHandler()的调用，并取消 .item:nth-child(1) 处的注释 -->
            <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>
        <button type="button" class="btn" id="goPre"><</button>
        <button type="button" class="btn" id="goNext">></button>
    </div>



    <!-- JS -->
    <script>
        var items = document.getElementsByClassName('item'); // 图片item
        var points = document.getElementsByClassName('point'); // 点point
        var goPreBtn = document.getElementById('goPre');
        var goNextBtn = document.getElementById('goNext');
        // BlankProblemHandlerFlag == "Pre" // BlankProblemHandler()参数，用于判断函数应用于goNext()还是goPre()
        var time = 0; // 定时器时间参数

        var index = 0;
        // 表示第几张图片在展示0~4
        
        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';
            }
        }
        //使当前items[index]唯一具有'item active'类名
        var goIndex = function(){ 
            clearActive();
            items[index].className = 'item active';
            points[index].className = 'point active';
        }

        // 打印当前Index和各item类名
        var logIndexAndItemClassName = function(){ 
            console.log(index); 
            console.log(items[0].className);
            console.log(items[1].className);
            console.log(items[2].className);
            console.log(items[3].className);
            console.log(items[4].className);
        }

        // 解决第一个黑色item全透明的问题的尝试
        // var BlankProblemHandlerFlag = "Unknow";
        // var BlankProblemHandler =function(){
        //     if(BlankProblemHandlerFlag == "Next"){
        //         if(index == 4){
        //             items[0].setAttribute("style","background-color: black; opacity: 1;")
        //         } else{
        //         items[0].setAttribute("style","background-color: black; opacity: 0;")
        //         }
        //     }
        //     if(BlankProblemHandlerFlag == "Pre"){
        //         if(index == 1){
        //             items[0].setAttribute("style","background-color: black; opacity: 1;")
        //         } else{
        //             items[0].setAttribute("style","background-color: black; opacity: 0;")
        //         }
        //     }
        // }

        // 切换下一张图片
        var goNext = function(){
            // BlankProblemHandlerFlag = "Next";
            // BlankProblemHandler();

            if(index == items.length-1){
                index = 0;
            } else {
                index++;
            }
            goIndex(); //使当前items[index]唯一具有'item active'类名
            logIndexAndItemClassName();
        }
        // 切换上一张图片
        var goPre = function(){

            // BlankProblemHandler();

            if(index == 0){
                index = 4;
            } else {
                index--;
            }
            goIndex();
        }

        goNextBtn.addEventListener('click',function(){
            goNext();
        })

        goPreBtn.addEventListener('click',function(){
            goPre();
        })

        // 为每一个point添加监听器,点击点跳转到对应图片
        for(var i = 0; i < points.length; i++){
            points[i].addEventListener('click',function(){
                var pointIndex = this.getAttribute('data-index'); // this指points[i]
                console.log('点击了点' + pointIndex)

                index = pointIndex;
                goIndex();
                time = 0; // 重置的定时器参数
            })
        }

        // 自动轮播，2000ms跳转一次

        setInterval(function(){
            time ++;
            if(time  == 20){
                goNext();
            }
            if(time > 20){
                time = 0;
            }

        },100)

    </script>