实现自动轮播图（html+js）-Toy模板网

这篇具有很好参考价值的文章主要介绍了实现自动轮播图（html+js）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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>

效果图：

html轮播图自动切换,html,javascript,前端文章来源地址https://www.toymoban.com/news/detail-519856.html