PC轮播图HTML+CSS+JavaScript

 

 

 

PC的轮播图HTML样式部分

  <div class="box">
        <div class="left_button">《</div>
        <ul class="img_box">
            <li><img src="./img/img1.jpg" alt=""></li>
            <li><img src="./img/img2.jpg" alt=""></li>
            <li><img src="./img/img3.jpg" alt=""></li>
            <li><img src="./img/img4.jpg" alt=""></li>
        </ul>
        <ol class="dian_box">
            <li class="color"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <div class="right_button">》</div>
    </div>

　　

PC的轮播图CSS样式部分

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        .box {
            width: 400px;
            height: 200px;
            overflow: hidden;
            position: relative;
            margin: 100px auto;
        }

        .box .img_box {
            position: absolute;
            left: 0;
            top: 0;
        }

        .box .img_box li {
            width: 400px;
            height: 100%;
            float: left;
        }

        .box .img_box li img {
            width: 100%;
            height: 100%;
        }

        .box .dian_box {
            width: 80px;
            position: absolute;
            left: 50%;
            margin-left: -40px;
            bottom: 4px;
            overflow: hidden;
        }

        .box .dian_box .color {
            background-color: pink;
            border: 1px solid red;
        }

        .box .dian_box li {
            width: 10px;
            height: 10px;
            border: 1px solid #000;
            border-radius: 50%;
            float: left;
            margin: 0px 4px;
        }

        .box .left_button {
            width: 20px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            position: absolute;
            top: 50%;
            margin-top: -40px;
            left: 0;
            background-color: #fff;
            opacity: 0.8;
            z-index: 1;
            display: none;
        }

        .box .right_button {
            width: 20px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            position: absolute;
            top: 50%;
            margin-top: -40px;
            right: 0;
            background-color: #fff;
            opacity: 0.8;
            z-index: 1;
            display: none;
        }
    </style>

　　

PC的轮播图JS样式部分

<script>
    var left_button = document.querySelector('.left_button');//获取左击按钮
    var right_button = document.querySelector('.right_button');//获取右击按钮
    var imgBox = document.querySelector('.img_box');//获取图片盒子
    var box = document.querySelector('.box')//获取整体的盒子
    var img = imgBox.querySelectorAll('img')//获取图片
    var imgWeight = (imgBox.querySelector('img')).offsetWidth;//获取图片的宽度
    var dian_box = document.querySelectorAll('.dian_box li')//获取所有的点
    var index = 0;//计数器
    var imgBox_lunbo = setInterval(imgBoxFn, 1000);//定时器
    box.addEventListener('mouseover', function () {
        left_button.style.display = 'block'
        right_button.style.display = 'block'
        clearInterval(imgBox_lunbo)
    })
    box.addEventListener('mouseout', function () {
        left_button.style.display = 'none'
        right_button.style.display = 'none'
        imgBox_lunbo = setInterval(imgBoxFn, 1000);
    })
    left_button.addEventListener('click', function () {
        var a = Number(imgBox.style.left.split('px')[0]);
        if (a == (-imgWeight * (img.length - 1))) {
            for (var i = 0; i < dian_box.length; i++) {
                dian_box[i].className = ''
            }
            imgBox.style.left = 0 + 'px';
            index = 0;
            dian_box[index].className = 'color'
        } else {
            for (var i = 0; i < dian_box.length; i++) {
                dian_box[i].className = ''
            }
            imgBox.style.left = index * -imgWeight + 'px';
            dian_box[index].className = 'color'
        }
        index++;
    })

    right_button.addEventListener('click', function () {
        var a = Number(imgBox.style.left.split('px')[0]);
        if (a == 0) {
            for (var i = 0; i < dian_box.length; i++) {
                dian_box[i].className = ''
            }
            index = (img.length - 1);
            imgBox.style.left = (index * -imgWeight) + 'px'
            dian_box[index].className = 'color';
        } else {
            for (var i = 0; i < dian_box.length; i++) {
                dian_box[i].className = ''
            }
            index--;
            imgBox.style.left = index * -imgWeight + 'px';
            dian_box[index].className = 'color';
        }
    })

    for (var i = 0; i < dian_box.length; i++) {
        dian_box[i].setAttribute('index', i);
        dian_box[i].addEventListener('click', function () {
            for (var j = 0; j < dian_box.length; j++) {
                dian_box[j].className = ''
            }
            dian_box[this.getAttribute('index')].className = 'color';
            imgBox.style.left = this.getAttribute('index') * -imgWeight + 'px';
            console.log(this.getAttribute('index') * -imgWeight);
        })
    }

    function imgBoxFn() {
        console.log(imgBox.style.left);
        var a = Number(imgBox.style.left.split('px')[0]);
        if (a == (-imgWeight * (img.length - 1))) {
            for (var i = 0; i < dian_box.length; i++) {
                dian_box[i].className = ''
            }
            imgBox.style.left = 0 + 'px';
            index = 0;
            dian_box[index].className = 'color'
        } else {
            for (var i = 0; i < dian_box.length; i++) {
                dian_box[i].className = ''
            }
            imgBox.style.left = index * -imgWeight + 'px';
            dian_box[index].className = 'color'
        }
        index++;
    }
</script>