web-js轮播图

效果如下

所用图片如下

html

<!DOCTYPE html>
<html>
<head>
    <title>js-轮播</title>
    <link rel="stylesheet" type="text/css" href="./css/lunbo.css">
</head>
<body>
    <div id="lunbo_box" class="lunbo_box">
        <div class="btn left_btn"></div>
        <div class="btn right_btn"></div>
        <div id="circle_box" class="circle_box">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>

    <script type="text/javascript" src="./js/script.js"></script>
    <script type="text/javascript">
        var img_list = ["1.webp","2.webp","3.webp","4.webp","5.webp"];
        var lunbo = new lunbor("lunbo_box",img_list);
    </script>
</body>
</html>

lunbo.css

.lunbo_box{
    width: 590px;
    height: 470px;
    border: 2px solid purple;
    box-sizing: border-box;
    position: relative;
}
.btn{
    width: 100px;
    height: 470px;
    border: 2px solid black;
    box-sizing: border-box;
    position: absolute;
    top: 0;
}
.left_btn{
    left: 0;
}
.right_btn{
    right: 0;
}
.circle_box{
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
}
.circle_box .circle{
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius:50%;
    /*display: inline-block;*/
    margin-right: 10px;
    float: left;
}
.circle_box .circle:last-child{
    margin-right: 0;
}
.circle_box .circle.active{
    background: #f20109;
    box-shadow: 0 0 1.5px 1.5px #ddd;
}

script.js

var lunbor = (function(){
    function lunbor(lunbor_box,img_list){
        this.lunbor_box = lunbor_box;
        this.img_list = img_list;
        this.len = img_list.length;
        this.cur_index = 0; 
        this.init();
        lun = this
        Inter = setInterval(function(){lun.next()},2000)

        var el = window.document.body;//声明一个变量，默认值为body
        window.document.body.onmouseover = function(event){
            el = event.target;//鼠标每经过一个元素，就把该元素赋值给变量el
            console.log('当前鼠标在', el, '元素上');//在控制台中打印该变量
            // console.log('在', document.getElementById(lun.lunbor_box), '元素上');//在控制台中打印该变量
            if (el == document.getElementById(lun.lunbor_box)) {
                console.info("停止换图片")
                clearInterval(Inter)
                Inter = null
                console.info('Inter "'+ Inter +'"')
            }
            else{
                console.info("自动换图片")
                if(Inter==null){//判断计时器是否为空
                    Inter = setInterval(function(){lun.next()},2000)
                }
            }
        }
    }   

    lunbor.prototype.init = function() {
        this.set_bg();

        var dot_html = "";
        for(var i =0 ;i<this.len;i++){
            // dot_html += '\n          <div class="circle"></div>'
            dot_html += '<div flag="'+ i +'" class="circle"></div>'
        }
        var circle_box = document.querySelector("#" + this.lunbor_box + " .circle_box");
        circle_box.innerHTML = dot_html;

        this.set_dot_active();

        // 绑定点击事件
        this.bind_evnet();

    };

    lunbor.prototype.bind_evnet = function(){
        var right_btn = document.querySelector("#" + this.lunbor_box + " .right_btn");
        var left_btn = document.querySelector("#" + this.lunbor_box + " .left_btn");
        var lunbor_box = this;
        right_btn.onclick = function(){
            lunbor_box.next();
        }
        left_btn.onclick = function(){
            lunbor_box.last();
        }

        var circles = document.querySelectorAll("#" + this.lunbor_box + " .circle_box .circle");
        circles.forEach(function(data){
            var num = data.getAttribute("flag")
            console.info(num)
            data.onclick = function(){
                lunbor_box.set_num(num);
            }
        });
    }
    
    lunbor.prototype.set_num = function(num){
        this.cur_index = num;
        this.set_bg();
        this.set_dot_active();
    }

    lunbor.prototype.set_bg = function(){
        var lunbor_box = document.getElementById(this.lunbor_box)
        lunbor_box.style.background = "url(./img/"+ this.img_list[this.cur_index]+")"
        lunbor_box.style.backgroundSize = "cover";
    }

    lunbor.prototype.set_dot_active =function(){
        var circle_box = document.querySelector("#" + this.lunbor_box + " .circle_box");
        var children = circle_box.children;
        for(var i=0;i< children.length;i++){
            var child = children[i];
            child.classList.remove("active");
            if(i==this.cur_index) {
                child.classList.add("active")
            }
        }
    }

    lunbor.prototype.next = function(){
        var circle_box = document.querySelector("#" + this.lunbor_box + " .circle_box");
        var children = circle_box.children;
        if(this.cur_index < this.len -1){
            this.cur_index++;
        }else{
            this.cur_index = 0;
        }
        this.set_bg();
        this.set_dot_active();
    }

    lunbor.prototype.last = function(){
        var circle_box = document.querySelector("#" + this.lunbor_box + " .circle_box");
        var children = circle_box.children
        if(this.cur_index > 0){
            this.cur_index--;
        }else{
            this.cur_index = this.len - 1;
        }
        this.set_bg();
        this.set_dot_active();
    }

    return lunbor;
}());

web-js轮播图

推荐阅读更多精彩内容