可加群号下载文件名 banner比较完整的代码 805371278 下载完可直接运行不需要引用其它东西
1，最近 又得需求 需要轮播图 为了省事 就一直 引用 swipe 组件 ，但是 只是用几张轮播 引用那么大的资源 有点 浪费 抽空就自己写了一个 只需要 改变轮播图的 个数 其它的 不用改变 动态 和swipe 使用方法类似
自动循环再点击的时候 还是有瑕疵的 希望有大神可以指点一下 话不多 先上效果图 在线预览 预览
代码部分
1，html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="big_box">
<div class="Z_banner_box">
<div class="Z_banner" id="Z_bb">
<div class="Z_b_box" id="Z_b_box">
<div class="Z_B_box">
轮播1
</div>
<div class="Z_B_box">
轮播2
</div>
<div class="Z_B_box">
轮播3
</div>
<div class="Z_B_box">
轮播4
</div>
<div class="Z_B_box">
轮播5
</div>
<div class="Z_B_box">
轮播6
</div>
</div>
<!-- 左右按钮 -->
<div class="Z_btns Z_btn_left">
<span id="Z_btn_left"> < </span>
</div>
<div class="Z_btns Z_btn_right">
<span id="Z_btn_right"> > </span>
</div>
<!-- 下部小点 -->
<div class="Z_dian" id="Z_dian_box"></div>
</div>
</div>
</div>
</body>
<script src="./js/index.js"></script>
</html>
2 js
(function () {
// 监听页面宽度变化 自动刷新 开发需要 生产环境 可注释掉
window.onresize = function () {
location.reload()
}
// 定义轮播的时间 单位可选s、ms
let time = "1s"
// 是否需要循环 是：true 否：false
let loop = false
// 是否需要自动循环 是：true 否：false
let auto_loop = false
// 获取轮播个数
let A = document.getElementsByClassName("Z_B_box").length
// 保存一个轮播个数
let A_ = A
// 获取轮播宽度
const B = document.getElementById("Z_bb").clientWidth
// 获取轮播
const C = document.getElementById("Z_b_box")
// 获取轮播子节点
const C2 = document.getElementById("Z_b_box").getElementsByClassName("Z_B_box")
// 获取轮播子节点第一个
const C2_1 = document.getElementById("Z_b_box").firstChild
// 获取轮播小点
const D = document.getElementById("Z_dian_box")
// 获取轮播小点子节点
const D2 = document.getElementById("Z_dian_box").getElementsByTagName("span")
// 当前位移量
let aa = 0;
// 给轮播图添加索引 index
for (let i = 0; i < A; i++) {
C2[i].setAttribute("data-index", i)
}
// 先判断是否需要循环 复制轮播图轮播
if (loop) {
for (let i = 0; i < A; i++) {
let newNode;
// 复制节点 是复制自身节点
newNode = C2[i].cloneNode(true);
// 复制节点追加到轮播中
if (i == 0) {
C.appendChild(newNode);
} else if (i == A - 1) {
// console.log(A - 1)
C.insertBefore(newNode, C2_1);
}
}
// 重新获取轮播图的个数
A2 = document.getElementsByClassName("Z_B_box").length
// 重新赋值轮播个数
A = A2
// 视图位移
aa = B
C.style.transform = "translate3d( -" + aa + "px, 0, 0)"
}
// 定义轮播宽度
C.style.width = A * B + "px";
// 是否获取索引
let Hq_index = true
let index;
if (Hq_index) {
hq_index()
}
// 获取索引
function hq_index() {
// 计算当前的索引
index = aa / B
// console.log(index)
Z_dian_xuan(index)
}
// 控制滑动函数
// 转换时间
let z_time;
if (time.indexOf("s") > -1) {
z_time = time.substring(0, time.indexOf("s")) * 1000
if (time.indexOf("m") > -1) {
z_time = time.substring(0, time.indexOf("m")) * 1
}
}
// 判断重复点击
let Z_XYZ = false
function dh(data) {
if (Z_XYZ) return
if (data == 2) { // 下一张
if (!loop) { // 不循环执行的代码
if (aa == (A - 1) * B) {
return
} else {
aa += B
yidong(time, aa) // 调用移动函数
}
} else { // 循环执行的代码
if (aa == (A - 2) * B) {
aa += B
yidong(time, aa) // 调用移动函数
Z_XYZ = true
aa = B
// Z_XYZ
// 过渡事件触发 当点击到复制的一张的时候自动把轮播图调回第一张
const C2_2 = document.getElementById("Z_b_box").addEventListener("transitionend", function () {
// console.log("过渡已完成")
yidong("0s", aa)
Z_XYZ = false
});
} else {
aa += B
yidong(time, aa) // 调用移动函数
}
}
} else { // 上一张
if (!loop) { // 不循环执行的代码
if (aa == 0) {
return // 返回
} else {
aa -= B
yidong(time, aa) // 调用移动函数
}
} else { // 循环执行的代码
if (aa == B) {
aa -= B
yidong(time, aa) // 调用移动函数
Z_XYZ = true
aa = (A - 2) * B
const C2_2 = document.getElementById("Z_b_box").addEventListener("transitionend", function () {
// console.log("过渡已完成")
yidong("0s", aa)
Z_XYZ = false
});
} else {
aa -= B
yidong(time, aa) // 调用移动函数
}
}
// console.log(aa)
}
hq_index()
}
// 判断是否需要自动循环
let z_time2 = z_time * 2
if (auto_loop) {
if (loop) {
setInterval(() => {
dh(2)
}, z_time2);
}
}
// 移动函数
function yidong(time2, num) {
C.style.transition = time2;
C.style.transform = "translate3d( -" + num + "px, 0, 0)"
}
// 获取按钮
let Z_btn_right = document.getElementById("Z_btn_right")
let Z_btn_left = document.getElementById("Z_btn_left")
// 点击事件
Z_btn_right.onclick = function () { // 下一张 右边按钮
dh(2)
}
Z_btn_left.onclick = function () { // 上一张 左边按钮
dh(1)
}
// 分页器
for (let i = 0; i < A_; i++) {
let newNode;
// 复制节点 是复制自身节点
newNode = document.createElement("span");
newNode.className = "Z_dian_span"
// 复制节点追加到轮播中
D.appendChild(newNode);
}
// 分页器 逻辑 处理
function Z_dian_xuan(data) {
// 做一个延时处理 可通过直接打印 console.log(D2[0]) 对比
// 不加延时 是 undefined 等节点完全生成
// console.log(D2[0])
setTimeout(() => {
let num = data
if (loop) { // 循环执行
num = data - 1
for (let i = 0; i < A_; i++) {
if (i == num) {
D2[i].className = "Z_dian_span Z_dian_xuan"
} else {
D2[i].className = "Z_dian_span "
}
}
} else { // 不循环执行
for (let i = 0; i < A_; i++) {
if (i == num) {
D2[i].className = "Z_dian_span Z_dian_xuan"
} else {
D2[i].className = "Z_dian_span "
}
}
}
}, 0)
}
// 拖动轮播 待续
}())
3,css
*{
margin: 0;
padding: 0;
}
.big_box{
max-width: 750px;
margin: 0 auto;
}
img{
display: block;
width: 100%;
}
.Z_banner{
width: 70%;
height: 200PX;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.Z_banner_box{
position: relative;
}
.Z_b_box{
display: flex;
height: 100%;
text-align: center;
}
.Z_B_box{
display: flex;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
justify-content: center;
align-items: center;
}
.Z_btns{
text-align: center;
position: absolute;
top: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: aquamarine;
font-size: 30px;
height: 23%;
margin-top: -5%;
}
.Z_btn_left{
left: 0;
}
.Z_btn_right{
right: 0;
}
.Z_btns span{
display: inline-block;
width: 100%;
height: 100%;
}
/* 点的样式 */
.Z_dian{
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
text-align: center;
/* display: flex; */
}
.Z_dian_span{
display: inline-block;
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #EBEBEB;
margin: 0 4px;
}
.Z_dian_xuan{
background-color: yellow;
}
