JS图片点击附带效果

最新推荐文章于 2023-02-25 13:48:19 发布

evenzx

最新推荐文章于 2023-02-25 13:48:19 发布

阅读量363

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/evenzx/article/details/109436874

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片效果</title>
    <style>
        .ceimg {
            display: flex;
            height: 260px;
            align-items: center;
            position: relative;
        }

        .ceimg>img {
            margin-right: 14px;
            width: 130px;
            height: 180px;
        }
     /*   
     ::-webkit-scrollbar去除滚动条
*/
        .ceimg::-webkit-scrollbar {
             display: none; 
        }

        .choice {
            border: 3px solid red;
            box-shadow: 0px 2px 2px black;
        }

        div>span {
            position: absolute;
            top: 45%;
            background-color: rebeccapurple;
            cursor: pointer;
        }

        span:nth-child(1) {
            left: 0px;
            z-index: 1;
        }

        span:nth-child(2) {
            z-index: 1;
            right: 0;
        }
    </style>
</head>

<body>
<div>
  </div>
     <script>
        let divel = document.querySelector('div');
        let dataArr = [
            { name: '../img/1.jpg' },
            { name: '../img/2.jpg' },
            { name: '../img/3.jpg' },
            { name: '../img/5.jpg' },
            { name: '../img/6.jpg' },
            { name: '../img/7.jpg' },
            { name: '../img/8.jpg' },
            { name: '../img/9.jpg' },
            { name: '../img/10.jpg' },
            { name: '../img/11.jpg' },
        ];
        divel.style.width = 1200 + "px";
        divel.style.height = 260 + "px";
        divel.style.backgroundColor = "#eee";
        divel.style.margin = "auto";
        divel.style.overflow="hidden";
        divel.style.position = "relative";
        function rend() {
            let str = "";
            str += `
        <span data-index="-"">&lt;</span>
        <span data-index="+">&gt;</span>`;
            str += `
    <div class="ceimg">`;
            for (let index in dataArr) {
                str += `
         <img src="${dataArr[index].name}" alt="" data-inde="${index}">
         `;
            }
            str += `
    </div >`;
            divel.innerHTML = str;
            let imge = document.querySelector(".ceimg>img");
            imge.setAttribute("class", "choice");
        }
        rend();
        let imgele = document.querySelectorAll(".ceimg>img");
        console.log(imgele);
        let indeximg = 0;
        divel.addEventListener("click", dianji);
        function dianji(e) {
            let event = e || window.event;
            //点击图片添加边框
            if (event.target.localName == "img") {
                [...imgele].map(item => item.className = " ");
                indeximg = event.target.dataset.inde;
                console.log(indeximg);
                // console.log(indeximg);  拿到图片下标
                event.target.setAttribute("class", "choice");
                //   imgele[indeximg].style.transform = "scale(1.02)";
            }

            //判断是否点击到第一张图片（即不会再往前展示）
            if (event.target.dataset.index == "+") {
                [...imgele].map(item => item.className = " ");
                if (indeximg == imgele.length - 1) {
                    indeximg = imgele.length - 1;
                }
                else {
                    indeximg++;
                }
                imgele[indeximg].setAttribute("class", "choice");
            }
            
            //判断是否点击到第一张图片（即不会再往前展示）
            if (event.target.dataset.index == "-") {
                [...imgele].map(item => item.className = " ");
                if (indeximg == 0) {
                    indeximg = 0;
                }
                else {
                    indeximg--;
                }
                imgele[indeximg].setAttribute("class", "choice");
            }
            let divEle = document.querySelector("div>.ceimg");
            console.log(divEle);
            if (indeximg == 8) {
                divEle.style.left = -(8 * ([...imgele][0].clientWidth) +100) + "px";
            }

            if (indeximg == 7) {
                let divEle = document.querySelector("div>.ceimg");
                 divEle.style.left = 0 + "px";
    }
}
    </script>
</body>
</html>

在这里插入图片描述图1
图2
图3

上面是3张图片样式当打开页面显示图1 点击右按钮图片加当到达图一最后一张图片时候再点击会到达图3 当再点击加按钮又会到图3 。

evenzx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS图片点击附带效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片效果</title> <style> .ceimg { d
复制链接

扫一扫