A simple small practice carousel map implemented using html and js. The main functions are:
1. Use the time function to automatically switch pictures;
2. Bind the event agent on the parent node of the picture, the button and the small dot, add the mouseenter and mouseleave event types, let the mouse move in, the picture pauses, moves out, and the picture resumes carousel;
3. Bind the event agent on the parent node of the button. The event type is click. Use event.target to determine the target range of the click, so that the left and right buttons can be clicked to switch to the previous or next one; 4. Add to the
picture Style, so that the four small dots below will change color with the picture;
5. Bind the event agent on the parent node of the small dot, the event type is click, and use event.target to determine the target range of the click, so that the small circle The point can be clicked and switched to the corresponding picture.
I still use the DOM2 event agent . I have commented the detailed explanation and code steps in the code below, please read it.
[Note: Only for viewing and sharing learning by yourself]
The renderings are as follows:
code show as below:
<!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";
}