实现自动轮播图（html+js）

原创已于 2022-10-13 19:19:32 修改 · 4.9k 阅读

45 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端

于 2022-10-13 19:12:38 首次发布

本文介绍了一个简单的图片轮播实现方案，使用HTML、CSS和JavaScript构建。包含完整的代码示例，展示了如何通过定时器自动切换图片，并利用导航按钮和指示器进行手动控制。

简单实现图片的自动轮播，需要的朋友可以参考一下。

html代码：

<div class="cut">
    <img class="img" src="./images/1.webp" alt="">
    <div class="contral prev"><</div>
    <div class="contral next">></div>
     <ul class="btn"><!-- 圆点 -->
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>
</div>

css代码：

<style type="text/css">
    .cut {
        position: relative;
        width: 590px;
        height: 470px;
        background-color: antiquewhite;
        margin: 0 auto;
    }
    .contral {
        position: absolute;
        top: 50%;
        width: 24px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        text-align: center;
        font-size: 14px;
        background-color: rgba(0, 0, 0, .2);
        cursor: pointer;
    }
    .prev {
        left: 0;
    }
    .next {
        right: 0;
    }   
    .btn {
        position: absolute;
        bottom: 20px;
        left: 30px;
        width: 150px;
        height: 15px;            
    }
    .cut>ul>li {
        float: left;
        width: 10px;
        height: 10px;
        margin-right: 4px;
        border: 1px solid rgba(0, 0, 0, .05);
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.4);
        list-style: none;
    }
    .cut .active {
        position: relative;
        top: -1px;
        width: 10px;
        height: 10px;           
        border:2px solid rgba(0, 0, 0, .1) ;
        background-color: #fff;
    }
</style>

js代码：

<script type="text/javascript">
    let img = document.querySelector('.img');
    let prev = document.querySelector('.prev');
    let next = document.querySelector('.next');
    let cut = document.querySelector('.cut');
    let lis = document.querySelectorAll('.btn li');
    let imgAll = ['1.webp', '2.webp', '3.webp'];
    let count = 0;
    function cutt() {
        img.src = './images/' + imgAll[count];
        for (let i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        lis[count].className = 'active';
    }
    let timer = setInterval(function () {
        count++;
        if (count > imgAll.length - 1) {
            count = 0;
        }
        cutt();
    }, 1500);
    next.onclick = function () {
        count++;
        if (count > imgAll.length - 1) {
            count = 0;
        }
        cutt();
    }
    prev.onclick = function () {
        count--;
        if (count < 0) {
            count = imgAll.length - 1;
        }
        cutt();
    }
    cut.onmouseover = function () {
        clearInterval(timer);
    }
    cut.onmouseout = function () {
        timer = setInterval(function () {
            count++;
            if (count > imgAll.length - 1) {
                count = 0;
            }
            cutt();
        }, 1500);
    }
    for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseover = () => {
            count = i;
            cutt();
        };
    }
</script>

效果图：