JS_面向过程无缝轮播图
无缝轮播.gif
- 写之前一定要先理清楚思路，顺序很重要哦~~~
- 初始化变量
- 全局变量
- 布尔值
- 数组
- 初始化函数
- 初始化轮播图的尺寸
- 创建轮播图外容器
- 调用【函数3】
- 调用【函数4】
- 调用【函数5】
- 将轮播图外容器添加到页面中
- 添加鼠标监听事件（包括移入和移除）
- 将小圆点居中
- 调用【函数10】，初始化第一个小圆点选中
- 给window添加 改变窗口尺寸的侦听事件 并调用【函数6】
- 调用【函数11】
- 创建图片容器
- 创建左右切换按钮
- 创建ul小圆点
- 窗口尺寸的监听函数
- 添加左右按钮点击事件
- 添加小圆点点击事件
- 创建下一张图片的函数
- 创建选中当前小圆点索引的函数
- 创建动画函数（驱动【12】和【13】）
- 图片移动函数
- 自动轮播函数（默认向左轮播）
- 鼠标进入轮播图的监听事件
- Utils.js
export default class Utils{
static ce(type, style, data) {
var elem = document.createElement(type);
Object.assign(elem.style, style);
return elem;
}
}
- 引入Utils文件
<script type="module">
import Utils from "./js/Utils.js";
//1. 初始化全局变量
var widthRem, heightRem, imgCon, pre, dot;
var position = 0, imgConX = 0, speed = 0.5, time = 300, direction = "left";
var moveBool = false, autoBool = true;
var btnList = [],
btnArr = ["./img/left.png", "./img/right.png"],
imgArr = ["./img/a.jpg", "./img/b.jpg", "./img/c.jpg", "./img/d.jpg", "./img/e.jpg"];
//2. 初始化函数
init();
function init() {
// 设置rem的根字体大小
document.documentElement.style.fontSize = "100px";
// 设置body的字体大小
document.body.style.fontSize = "16px";
document.body.style.margin = "0px";
// 获取全屏幕尺寸宽高rem值
widthRem = screen.width / 100;
heightRem = screen.width / 100 / 3;
// 创建轮播图外容器
var carousel = Utils.ce("div", {
width: widthRem + "rem",
height: heightRem + "rem",
position: "relative",
overflow: "hidden"
});
// 创建图片容器及图片
createImgCon(carousel);
// 创建按钮
createBtn(carousel)
// 创建小圆点
createDot(carousel)
document.body.appendChild(carousel);
carousel.addEventListener("mouseenter", mouseHandler);
carousel.addEventListener("mouseleave", mouseHandler);
dot.style.left = (widthRem - dot.offsetWidth / 100) / 2 + "rem";
changePre();
// 侦听改变窗口尺寸事件
window.addEventListener("resize", resizeHandler);
// 初次执行
resizeHandler();
animation();
}
// 3. 创建图片容器
function createImgCon(parent) {
imgCon = Utils.ce("div", {
width: widthRem * 2 + "rem",
height: heightRem + "rem",
position: "absolute",
left: 0
});
//初始化第一张图片
let img = Utils.ce("img", {
width: widthRem + "rem",
height: heightRem + "rem"
});
img.src = imgArr[0];
imgCon.appendChild(img);
parent.appendChild(imgCon);
}
// 4. 创建左右切换按钮
function createBtn(parent) {
for (let i = 0; i < btnArr.length; i++) {
let btn = Utils.ce("img", {
position: "absolute",
top: (heightRem - 0.6) / 2 + "rem",
left: i === 0 && "0.2rem",
right: i === 1 && "0.2rem"
});
btn.src = btnArr[i];
parent.appendChild(btn);
btnList.push(btn);
btn.addEventListener("click", clickHandler);
}
}
// 5.创建ul小圆点
function createDot(parent) {
dot = Utils.ce("ul", {
listStyle: "none",
position: "absolute",
padding: "0",
margin: "0",
bottom: "0.35rem"
})
for (let i = 0; i < imgArr.length; i++) {
let dots = Utils.ce("li", {
width: "0.2rem",
height: "0.2rem",
borderRadius: "50%",
cursor: "pointer",
float: "left",
marginLeft: i !== 0 && "0.1rem",
border: "2px solid #f00"
});
dot.appendChild(dots);
}
parent.appendChild(dot);
dot.addEventListener("click", dotClickHandler);
}
// 6. 根据窗口大小改变html的fontSize
function resizeHandler() {
document.documentElement.style.fontSize = innerWidth / screen.width * 100 + "px";
}
// 7. 左右按钮点击事件
function clickHandler(e) {
if (moveBool) return;
if (this.src.indexOf("left") < 0) {
direction = "left";
position++;
if (position > imgArr.length - 1)
position = 0;
} else {
direction = "right";
position--;
if (position < 0)
position = imgArr.length - 1;
}
createNextImg();
}
// 8.添加小圆点点击事件
function dotClickHandler(e) {
if (moveBool || (e.target.nodeName !== "LI")) return;
var doList = Array.from(dot.children);
var index = doList.indexOf(e.target);
if (position === index) return;
direction = index > position ? "left" : "right";
position = index;
createNextImg();
}
// 9. 创建下一张要展示的图片
function createNextImg() {
var img = Utils.ce("img", {
width: widthRem + "rem",
height: heightRem + "rem"
});
img.src = imgArr[position];
if (direction === "left") {
imgCon.appendChild(img);
imgConX = 0;
} else if (direction === "right") {
imgCon.insertBefore(img, imgCon.firstChild);
imgConX = - widthRem;
}
imgCon.style.left = imgConX + "rem";
moveBool = true;
changePre();
}
// 10. 创建选中当前小圆点索引的函数
function changePre() {
if (pre)
pre.style.backgroundColor = "rgba(255,0,0,0)";
pre = dot.children[position];
pre.style.backgroundColor = "rgba(255,0,0,0.8)";
}
// 11. 创建动画函数
function animation() {
requestAnimationFrame(animation);
imgConMove();
autoMove();
}
// 12. 图片移动函数
function imgConMove() {
if (!moveBool) return;
if (direction === "left") {
imgConX -= speed;
if (imgConX < - widthRem) {
moveBool = false;
imgConX = 0;
imgCon.firstElementChild.remove();
}
} else if (direction === "right") {
imgConX += speed;
if (imgConX > 0) {
moveBool = false;
imgConX = 0;
imgCon.lastElementChild.remove();
}
}
imgCon.style.left = imgConX + "rem";
}
// 13.自动轮播函数（默认向左轮播）
function autoMove() {
if (!autoBool) return;
time--;
if (time > 0) return;
time = 300;
var evt = new MouseEvent("click");
btnList[1].dispatchEvent(evt);
}
// 14. 鼠标进入轮播图的监听事件
function mouseHandler(e) {
if (e.type === "mouseenter") {
autoBool = false;
} else if (e.type === "mouseleave") {
autoBool = true;
time = 300;
}
}
</script>
