可点击切换的轮播图

最新推荐文章于 2023-05-22 19:35:07 发布

V________

最新推荐文章于 2023-05-22 19:35:07 发布

阅读量242

点赞数

分类专栏：练习文章标签： html js javascript

本文链接：https://blog.csdn.net/V________/article/details/112481979

版权

练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

//【点击左右功能，圆点的设置与移动】
let imgArr = ["./lunbopics/shutter_1.jpg", "./lunbopics/shutter_2.jpg", "./lunbopics/shutter_3.jpg", "./lunbopics/shutter_4.jpg"];
let artEle = document.getElementsByTagName("article")[0];

//初始化图片
function init() {
    let imgEle = document.createElement("img");
    imgEle.setAttribute("src", imgArr[0]);
    artEle.appendChild(imgEle);

    let i1 = document.createElement("i");
    i1.setAttribute("data-btn", "qian");
    artEle.appendChild(i1);

    let i2 = document.createElement("i");
    i2.setAttribute("data-btn", "hou");
    artEle.appendChild(i2);
}
init();

let i = 0;
// 更换图片
function changeIMG() {
    ++i;
    let imgEle = document.getElementsByTagName("img")[0];
    let spanEle = document.getElementsByTagName("span");
    if (i == imgArr.length) {
        i = 0;
    }
    imgEle.setAttribute("src", imgArr[i]);

    //设置每个span背景色为默认色（灰色）
    for (let item of spanEle) {
        item.style.backgroundColor = "gray";
    }
    //轮播到第几张图片，相对应的span背景设置为白色
    spanEle[i].style.backgroundColor = "white";
}
let timer = setInterval(changeIMG, 2000);

//dianji
artEle.addEventListener("click", clickIMG);

function clickIMG(e) {
    let event = e || window.event;
    let imgEle = document.getElementsByTagName("img")[0];
    let spanEle = document.getElementsByTagName("span");
    if (event.target.localName == "i") {
        if (event.target.dataset.btn == "hou" && i < imgArr.length - 1) {
            i = imgArr.indexOf(imgEle.getAttribute("src")) + 1;
            imgEle.setAttribute("src", imgArr[i]);
            //设置每个span背景色为默认色（灰色）
            for (let item of spanEle) {
                item.style.backgroundColor = "gray";
            }
            //轮播到第几张图片，相对应的span背景设置为白色
            spanEle[i].style.backgroundColor = "white";
        } else if (event.target.dataset.btn == "qian" && i > 0) {
            i = imgArr.indexOf(imgEle.getAttribute("src")) - 1;
            imgEle.setAttribute("src", imgArr[i]);
            //设置每个span背景色为默认色（灰色）
            for (let item of spanEle) {
                item.style.backgroundColor = "gray";
            }
            //轮播到第几张图片，相对应的span背景设置为白色
            spanEle[i].style.backgroundColor = "white";
        }

    }

    //点点点
    if (event.target.localName == "span") {
        i = event.target.dataset.index;
        imgEle.setAttribute("src", imgArr[i]);
        //设置每个span背景色为默认色（灰色）
        for (let item of spanEle) {
            item.style.backgroundColor = "gray";
        }
        //轮播到第几张图片，相对应的span背景设置为白色
        event.target.style.backgroundColor = "white";
    }
}

//生成点点点
function diandiandian() {
    let pEle = document.createElement("p");
    for (let index in imgArr) {
        let spanEle = document.createElement("span");
        spanEle.setAttribute("data-index", index);
        pEle.appendChild(spanEle);
        //给第一个点初始化背景色
        if (index == 0) {
            spanEle.style.backgroundColor = "white";
        }
    }
    artEle.appendChild(pEle);
}

diandiandian();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        /* article {
            width: 1000px;
            height: 356px;
            border: 1px solid red;
            margin: auto;
            position: relative;
            overflow: hidden;
        } */
        /* article {
            width: 1000px;
            height: 356px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            overflow: hidden;
        } */
        
        article {
            width: 1000px;
            height: 356px;
            border: 1px solid red;
            margin: auto;
            position: relative;
        }
        
        i {
            position: absolute;
            width: 49px;
            height: 49px;
            top: 170px;
            background-image: url("./lunbopics/shutter_prevBtn.png");
        }
        
        i:nth-of-type(1) {
            left: 5px;
        }
        
        i:nth-of-type(1):hover {
            background-position: 0 -50px;
        }
        
        i:nth-of-type(2) {
            right: 5px;
            transform: rotate(180deg);
        }
        
        i:nth-of-type(2):hover {
            background-position: 0 -50px;
        }
        
        p {
            position: absolute;
            bottom: 5px;
            right: 50%;
        }
        
        span {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            border-radius: 50%;
            background-color: rgb(141, 123, 121);
        }
        
        span:hover {
            background-color: white;
        }
    </style>
</head>

<body>
    <article>

    </article>

    <!-- <script src="./index.js"></script> -->
    <script src="./index3.js"></script>
</body>

</html>