HTML轮播图

最新推荐文章于 2024-08-07 14:19:47 发布

1024小白

最新推荐文章于 2024-08-07 14:19:47 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/weixin_73032901/article/details/129062320

版权

原生js轮播图带左右按钮，动态创建小圆点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .main{
        width: 1000px;
        height: 700px;
        margin: 0 auto;
        position: relative;
    }
    .imageBox,.ImgBox{
        width: 100%;
        height: 100%;
    }
    .ImgBox{
        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }
    img{
        width: 100%;
        height: 100%;
    }
    .smBox{
        position: absolute;
        bottom:10%;
        left: 50%;
        margin-left: -25%;
        width:50%;
        height: 20px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    .smBox span{
        width: 20px;
        height: 20px;
        background-color: aliceblue;
        border-radius: 50%;
    }
    .smBox span.active{
        background-color: brown;
    }
    .btn span{
        position:absolute;
        width: 50px;
        height: 40px;
        top:45%;
        font-size: 30px;
        color: #fff;
        line-height: 40px;
        background-color: brown;
        text-align: center;
    }
    .btn span:hover{
        opacity: .5;
    }
    .btn .prev{
        left: 0;
    }
    .btn .next{
        right:0;
    }
</style>
<body>
    <!-- 主体 -->
    <div class="main">
        <!-- 包图片的盒子 -->
        <div class="imageBox">
            <div class="ImgBox">
                <img src="./1.jpg" alt="">
            </div>
            <div class="ImgBox">
                <img src="./2.jpg" alt="">
            </div>
            <div class="ImgBox">
                <img src="./3.jpg" alt="">
            </div>
        </div>
        <!-- 小圆点 -->
        <div class="smBox">

        </div>
        <!-- 左右的按钮 -->
        <div class="btn">
            <span class="prev">《 </span>
            <span class="next"> 》</span>
        </div>
    </div>
</body>
<script>
    // 封装一个获取元素的方法
    // 多个值的直接传值 一个的值的（）后边加[0]
    function el(e){
        return document.querySelectorAll(e)
    }
    // 封装一个创建元素并添加的方法
    // 参数1：父元素
    // 参数2：要创建元素的标签
    function creAdd(parent,node){
        let el = document.createElement(node)
        parent.appendChild(el)
    }
    // 获取图片
    let imgBox = el(".ImgBox")
    // 获取装小圆点的盒子
    let smBox = el(".smBox")[0]
    // 根据图片个数添加小圆点
    for(let i=0;i<imgBox.length;i++){
        creAdd(smBox,'span')
    }
    //获取到创建好的小圆点
    let btn = el(".smBox span")
    // 显示第几张图片
    function showImg(n){
        for(let i=0;i<imgBox.length;i++){
            btn[i].className=""
            imgBox[i].style.display="none"
        }
        btn[n].className="active"
        imgBox[n].style.display="block"
    }
    // 声明一个变量保存定时器
    let timer = null
    // 声明一个变量保存当前的下标
    let index = 0
    // 设置一开始的默认样式
    showImg(index)
    // 封装一下自动轮播
    function timeAdd(){
        clearInterval(timer)
        timer = setInterval(function(){
            index++;
            // 判断大于图片数量就从第一个开始
            if(index>=imgBox.length)index=0;
            showImg(index)
        },1000)
    }
    timeAdd()
    // 获取到轮播图的主体
    let elMain = el(".main")[0];
    // 移入主体定时器停止移出主体定时器继续
    elMain.onmouseover = function(){
        clearInterval(timer)
    }
    elMain.onmouseout = ()=>{timeAdd()}
    // 点击哪个小圆点就显示哪个
    for(let i=0;i<btn.length;i++){
        btn[i].onclick = function(){
            index = i
            showImg(index)
        }
    }
    //获取左右按钮点击切换
    let prev = el(".prev")[0]
    let next = el(".next")[0]
    prev.onclick=()=>{
        index--;
        if(index<0)index=imgBox.length-1
        showImg(index)
    }
    next.onclick=()=>{
        index++;
        // 判断大于图片数量就从第一个开始
        if(index>=imgBox.length)index=0;
        showImg(index)
    }
</script>
</html>