您现在的位置是：首页 > 技术教程正文

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

admin 阅读： 2024-03-30

后台-插件-广告管理-内容页头部广告（手机）

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

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

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

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

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

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

效果图如下：

代码如下：

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";
}

标签:

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）