跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 卖家故事 > 基于html+js实现轮播图(自动轮播、左右按钮、小圆点点击及切换图片)

基于html+js实现轮播图(自动轮播、左右按钮、小圆点点击及切换图片)

时间:2024-04-03 20:25:36 来源:网络cs 作者:纳雷武 栏目:卖家故事 阅读:

标签: 图片  左右  实现  动轮 
阅读本书更多章节>>>>

使用html和js实现的一个简单小练习轮播图。大概功能主要是:

1、使用时间函数自动切换图片;

2、在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型,让鼠标移入,图片暂停,移出,图片恢复轮播;

3、在按钮的父节点身上绑定事件代理,事件类型为click,使用event.target判断点击的目标范围,让左右两个按钮,点击可以切换上一张或下一张;
4、给图片添加样式,让下面的四个小圆点会随图片变颜色;
5、在小圆点的父节点身上绑定事件代理,事件类型为click,同样使用event.target判断点击的目标范围,让小圆点可以点击并切换到对应的图片上。

依旧使用的是DOM2事件代理,详细的解释和代码步骤我都注释在下面的代码中的,请君一阅。

【注:仅作自己查看和分享学习之用】

效果图如下:

 代码如下:

<!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>轮播图</title>    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3881267_wfv3iyzbijg.css"></head><style>    section {        position: relative;        height: 500px;        width: 780px;        border: 1px solid;        margin: 100px auto;    }    #img {        height: 100%;        width: 100%;        background-size: 100% 100%;    }    p {        position: absolute;        left: 50%;        bottom: 0px;        transform: translate(-50%, -50%);    }    i {        height: 15px;        width: 15px;        background-color: gray;        border-radius: 50%;        display: inline-block;        margin-right: 10px;    }    i:nth-child(1) {        background-color: white;    }    i:nth-child(4) {        margin-right: 0;    }    .left,    .right {        color: rgba(255, 255, 255, 0.7);        font-size: 50px;        font-weight: bolder;        position: absolute;        top: 50%;        font-weight: 500;    }    .left {        left: 0px;        transform: translate(15%, -50%);    }    .right {        right: 0px;        transform: translate(-15%, -50%);    }</style><body>    <section>        <span class="left iconfont icon-anniu_jiantouxiangzuo"></span>        <img src="./img/冬至竹林1.jpg" alt="" id="img">        <span class="right iconfont icon-anniu-jiantouxiangyou"></span>        <p></p>    </section>    <script src="./index.js"></script></body></html>
/**  需求:         *  1、自动切换图片            2、鼠标移入,图片暂停,移出,图片恢复轮播            3、左右两个按钮,点击可以切换上一张或下一张            4、下面的四个小圆点会随图片变颜色            5、小圆点可以点击并切换到对应的图片上        */        //获取把圆点节点放置的盒子节点,即p节点        let pEle = document.getElementsByTagName("p")[0];        //获取事件代理的父元素section        let secEle = document.getElementsByTagName("section")[0];        let imgArr = [            "./img/冬至竹林1.jpg",            "./img/冬至竹林2.jpg",            "./img/冬至竹林3.jpg",            "./img/冬至竹林4.jpg",        ]        //获取时间函数的起始下标        let i = 0;        //图片有多少张,就传几个参进去,并且接收这个返回的数组        let cirArr = creatCircle(imgArr.length);        //遍历cirArr数组,将圆点添加进它的父节点p节点中        cirArr.forEach(node => pEle.appendChild(node));        //获取所有的圆点节点        let iEle = document.getElementsByTagName("i");        //给每一个圆点添加上自定义属性,并赋上下标        for (let k = 0; k < iEle.length; k++) {            iEle[k].dataset.index = k;        }        let timer;        //轮播:时间函数,1秒自动换一张        function playTime() {            timer = setInterval(() => {                //循环展示图片                i++;                //如果已经跳到最后一张,就再次回到第一张                if (i > imgArr.length - 1) {                    i = 0;                }                //给圆点添加样式,开始运行该函数                addStyleI(i);                //图片标签地址(src属性)                img.src = imgArr[i];            }, 1000);        }        playTime();        // 鼠标移入,图片暂停        secEle.addEventListener("mouseenter", function () {            clearInterval(timer);            timer = null;        });        // 鼠标移出,图片恢复滚动        secEle.addEventListener("mouseleave", playTime);        //给父节点绑定一个事件代理,点击左右按钮切换图片        secEle.addEventListener("click", function (e) {            let event = e || window.event;            //点击左右按钮切换图片            if (event.target.className == "left iconfont icon-anniu_jiantouxiangzuo") {                i--;            }            if (event.target.className == "right iconfont icon-anniu-jiantouxiangyou") {                i++;            }            if (i < 0) {                i = imgArr.length - 1;            }            if (i == imgArr.length) {//3                i = 0;            }            img.src = imgArr[i];            addStyleI(i);            //点击小圆点可以切换到对应的图片上            if (event.target.nodeName == "I") {                console.log("11111");                //获得点击的圆点的自定义索引值                cirI = event.target.dataset.index;                //替换图片                img.src = imgArr[cirI];                //更改圆点样式                addStyleI(cirI);                //每当点击小圆点,i的值就会被赋成圆点下标的值                i = cirI;            }        });        //暂停图片滚动        function picScroll() {            clearInterval(timer);        }        //生成圆点        function creatCircle(num) {            //创建一个空数组来接收这个圆点            let iArr = [];            for (let j = 0; j < num; j++) {                //新增圆点节点                let circleNode = document.createElement("i");                //再把新增的圆点节点放进圆点数组中                iArr.push(circleNode);            }            //完成后,返回该数组            return iArr;        }        //给圆点添加样式        function addStyleI(index) {            //圆点的默认颜色是灰色            [...iEle].forEach(node => node.style.backgroundColor = "gray");            //当跳到该图片时,圆点变成白色            iEle[index].style.backgroundColor = "white";        }

阅读本书更多章节>>>>

本文链接:https://www.kjpai.cn/gushi/2024-04-03/153570.html,文章来源:网络cs,作者:纳雷武,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论