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

使用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];//获取事件代理的父元素sectionlet 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) {//3i = 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";}

基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）相关推荐

英雄联盟轮播图自动轮播
六月过去了,七月还会远吗?不知不觉到了六月底的最后一天.你好,七月! 大家好,我是小陈陈呀,上次写了一篇英雄联盟轮播图手动轮播,当天晚上有很多大朋友小朋友私信小陈陈:可以在上次手动轮播的基础上,实现自 ...
js实现轮播图自动轮播
咱们今天看下怎么实现轮播图的自动轮播,用原生js, 一.思路首先,我们要对要实现的功能有一个明确的认知,知道了功能才能够实现相应的逻辑完整的轮播图需要具备的功能有: 1.点击左右浮块实现单张图片切 ...
js轮播图(手动轮播＋自动轮播)
效果图一.先获取一下需要用到的元素 var leftbtn=document.querySelector('.leftbtn'); //左按钮var rightbtn=document.queryS ...
js点击轮播或者自动轮播图代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk&q ...
js-图片的轮播-设置主要界面-和鼠标点击进行切换图片
这里使用了一个大的ul 将超出部分隐藏实现鼠标点击,控制图片的移动对超链接添加标识,控制图片和超链接的联动显示 <!DOCTYPE html> <html><head ...
html焦点图自动轮播,JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 ...
Html+CSS+JS轮播图：手动轮播，自动轮播
演示效果轮播图代码: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
幻灯片轮播图（含自动播放和手动点击播放，代码易懂）
HTML代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
vue，uniapp带有导航栏的轮播图swiper组件，滑动的同时点击导航栏切换，使异步滑动过程中位置发生改变，不能正常展示的问题解决（这里用uiniapp的swiper组件）
<view v-show="totalListArr.length>1" class="comp-tabs&qu ...

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

基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）相关推荐

最新文章

热门文章