面向对象轮播图

面向对象轮播图

面向对象轮播图_第1张图片

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
        <script src="./startMove.js">script>
        <style>
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            .ban{
                width: 500px;
                height: 300px;
                border: 1px solid pink;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
            }
            .ban .list{
                width: 700%;
                height: 300px;
                background-color: rgb(205, 182, 50);
                position: absolute;
                left: -500px;
            }
            .ban .list li{
                box-sizing: border-box;
                width: 500px;
                height: 300px;
                border: 1px solid black;
                float: left;
                font-size: 100px;
                text-align: center;
                line-height: 300px;
                font-weight: bolder;
            }
            .ban .cri{
                position: absolute;
                bottom: 10px;
                left: 300px;
            }
           .ban .cri li{
                width: 10px;
                height: 10px;
                background-color: gray;
                border-radius: 100%;
                float: left;
                margin-right: 10px;
            }

           .ban .cri .active{
                background-color: red;
            }
            .ban span{
                width: 20px;
                height: 20px;
                background-color: gray;
                font-size: 16px;
                position: absolute;
                text-align: center;
            }
            .ban .left{
                top: 50%;
                left: 1px;
            }
            .ban .right{
                top: 50%;
                right: 1px;
            }
        style>
        <script>
            window.onload = function(){
                function ban(){
                    this.oBan = document.querySelector(".ban");
                    this.oUl = document.querySelector(".ban .list");
                    this.aBtns = document.querySelectorAll(".ban .cri li");
                    this.oSpan = document.querySelectorAll(".ban span");
                    this.iNow = 1;
                    this.timer = null;
                    this.tab();
                    this.btn();
                    this.list();
                    this.auto();
                }
                ban.prototype.list=function(){
                    for (var i = 0; i < this.aBtns.length; i++) {
                        this.aBtns[i].index = i;
                        var that = this;
                        this.aBtns[i].onclick = function () {
                            that.iNow = this.index + 1;
                            that.tab()
                            console.log(this)
                        }
                    }

                }
                ban.prototype.btn=function(){
                    var that = this
                    this.oSpan[0].onclick = function () {
                        that.iNow--;
                        that.tab()
                    }

                    this.oSpan[1].onclick = function () {
                        that.iNow++;
                        that.tab()
                    }
                }
                ban.prototype.auto=function(){
                    var that = this;
                    this.timer = setInterval(function(){
                        that.iNow++;
                        that.tab();  
                    }, 3000);
                    this.oBan.onmouseenter = function () {
                        clearInterval(that.timer)
                        console.log(this)
                    }
                    this.oBan.onmouseleave = function () {
                        this.timer = setInterval(function(){
                            this.iNow++;
                            that.tab();
                    }, 2000)
                    }

                }
                
               
               ban.prototype.tab=function(){
                var that = this;
                    startMove(this.oUl, { left: -this.iNow * 500 }, function () {
                        if (that.iNow == that.aBtns.length + 1) {
                            that.iNow = 1;
                            that.oUl.style.left = "-500px"
                        }
                        if (that.iNow == 0) {
                            that.iNow = 5;
                            that.oUl.style.left = -500 * 5 + "px"
                        }
                                                                                                      
                    });
                    for (var j = 0; j < that.aBtns.length; j++) {
                        that.aBtns[j].className = "";
                    }
                    if (that.iNow == that.aBtns.length + 1) {
                        that.aBtns[0].className = "active";
                    } else if (that.iNow == 0) {
                        that. aBtns[that.aBtns.length - 1].className = "active";
                    } else {
                        that.aBtns[that.iNow - 1].className = "active";
                    }
                }

                new ban()
                // var b = new ban()
                // b.tab();
                // b.btn();
                // b.list();
                // b.auto();
            }
        script>
    head>
    <body>
        <div class="ban">
            <ul class="list">
                <li>5li>
                <li>1li>
                <li>2li>
                <li>3li>
                <li>4li>
                <li>5li>
                <li>1li>
            ul>
            <ul class="cri">
                <li class="active">li>
                <li>li>
                <li>li>
                <li>li>
                <li>li>
            ul>
            <span class="left"> < span>
            <span class="right"> > span>
        div>
    body>
    html>

你可能感兴趣的:(js)