js輪播圖,純源碼

最近也是在學js所以就做了個輪播圖來玩玩

CSS-------------------

* {
    padding: 0;
    margin: 0;
}

.box img {
    width: 700px;
    height: 400px;
}

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 700px;
    height: 400px;
    overflow: hidden;
    /* border: 2px solid red; */
}

.box1 {
    position: absolute;
    height: 400px;
    display: flex;
}

.left {
    position: absolute;
    background-color: black;
    width: 30px;
    height: 40px;
    opacity: .7;
    top: 190px;
    cursor: pointer;
    z-index: 22;
}

.right {
    position: absolute;
    background-color: black;
    width: 30px;
    height: 40px;
    opacity: .7;
    right: 0px;
    top: 190px;
    cursor: pointer;
    z-index: 22;
}

.circle {
    border-radius: 50%;
    position: absolute;
    left: 300px;
    bottom: 10px;
    display: flex;
}

.circle li {
    list-style: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: pink;
    margin-left: 5px;
    cursor: pointer;
}

JS代碼

window.onload = function() {
    //獲取元素
    var box = document.querySelector('.box')
    var img = document.querySelectorAll('img')
    var left = document.querySelector('.left')
    var right = document.querySelector('.right')
    var box1 = document.querySelector('.box1')
    var circle = document.querySelector('.circle')
        //拿到圖片的寬度
    var imgwdith = 700;
    // 動態設置box1長度
    box1.style.width = (img[0].offsetWidth * img.length) + 'px';
    //左右移動時使用的變量num
    var num = 0;
    //圓圈使用的變量o
    var o = 0;
    // 動態創建圓圈,與圖片數量保持一致
    for (var i = 0; i < img.length - 1; i++) {
        var lis = document.createElement('li');
        //設置索引
        var index = lis.setAttribute('index', i);
        circle.appendChild(lis);

        // 給li添加點擊事件
        circle.children[i].onclick = function() {

            for (var i = 0; i < circle.children.length; i++) {
                circle.children[i].style.backgroundColor = 'pink';
            }
            this.style.backgroundColor = 'white';
            //獲取li的索引
            var index = this.getAttribute('index');
            //index控制
            num = index;
            o = index;
            animateW(box1, -index * imgwdith);


        }
    };
    circle.children[0].style.backgroundColor = 'white';



    //綁定右側的點擊事件
    right.onclick = function() {

        if (num == img.length - 1) {
            box1.style.left = 0 + 'px';
            num = 0;
        }
        num++;
        animateW(box1, -num * imgwdith);
        o++;
        //圓圈跟着動
        //如果到最後一個就回到0;
        if (o == circle.children.length) {
            o = 0;
            circle.children[o].style.backgroundColor = 'white'

        }
        circlecss();

    };

    //綁定左側的點擊事件

    left.onclick = function() {

        if (num == 0) {
            num = img.length - 1;
            box1.style.left = -num * img.length + 'px';

        }
        num--;
        animateW(box1, -num * imgwdith);
        o--;
        //圓圈跟着動
        //如果是第一個,點擊之後變成最後一個;
        if (o < 0) {
            o = circle.children.length - 1;
        }
        circlecss();

    };
    //自動播放
    // 週期調用已經綁定事件的元素
    var int = setInterval(right.onclick, 2000);

    // 移入到容器中清除自動點擊事件
    box.onmouseover = function() {
            clearInterval(int);
        }
        // 移出容器的時候繼續調用自動點擊的事件
    box.onmouseout = function() {
        int = setInterval(right.onclick, 2000);
    }




    //圓圈的樣式變化函數
    function circlecss() {
        for (var i = 0; i < circle.children.length; i++) {
            circle.children[i].style.backgroundColor = "pink";
        }

        circle.children[o].style.backgroundColor = 'white';
    };

    // 動畫函數
    function animateW(obj, target) {
        //先把原先的定時器清除,只保留一個.
        clearInterval(obj.time);
        obj.time = setInterval(function() {
            //步長 公式:(目標位置-現在的位置)/10 
            var step = (target - obj.offsetLeft) / 10;
            step = step <= 0 ? Math.floor(step) : Math.ceil(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.time);
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15);
    };




}

HTML------

</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="box1">
            <img src="image/1.jpg" alt="">
            <img src="image/2.jpg" alt="">
            <img src="image/3.jpg" alt="">
            <img src="image/4.jpg" alt="">
            <img src="image/5.jpg" alt="">
            <img src="image/1.jpg" alt="">
        </div>
        <ol class="circle">
        </ol>
    </div>
</body>

這個js和圖片都是放在文件例來的,用的時候要引入





圖片是上網找的,侵刪;