<!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, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>轮播图</title>
<!-- css样式 -->
<style></style>
</head>
<body>
<div class="Lbt">
<ul class="Img">
<!-- 放图片 -->
<li><img src="../img/1.webp" alt="" /></li>
<li><img src="../img/2.webp" alt="" /></li>
<li><img src="../img/3.webp" alt="" /></li>
<li><img src="../img/4.webp" alt="" /></li>
<!-- 这里还需要放一张图片 因为自动轮播到最后一张到第一张图片 不放会有空白 -->
<li><img src="../img/5.webp" alt="" /></li>
</ul>
<!-- 左右两个按钮 -->
<div class="left1">></div>
<div class="right"><</div>
</div>
</body>
<script>
let Img = document.querySelector(".Img");
// 定义计时器 和 向左偏移量
var left = 0;
var timer = null;
// 实现自动滚动
fun1();
function fun1() {
// 走完重置left值
if (left <= -3200) {
left = 0;
}
Img.style.marginLeft = left + "px";
// 每次走完一张照片的时候 暂停一下
var n = left % 900 === 0 ? (n = 700) : (n = 6);
left -= 10;
timer = setTimeout(fun1, n);
}
// 图片位置的函数
function imgPosition(n) {
let lt = -(n * 800);
Img.style.marginLeft = lt + "px";
left = lt;
}
// 调用
// 点击左右按钮
let left1 = document.querySelector(".left1");
let right = document.querySelector(".right");
left1.onclick = function () {
let n = Math.floor(-left / 800) - 1;
// 位置如果在第一个图片,则返回到最后一张
if (n == -1) {
n = 3;
}
if (n == -1) {
n = 3;
}
imgPosition(n);
};
// // 点击右侧按钮
right.onclick = function () {
let n = Math.floor(-left / 800) + 1;
// 位置如果在第四个图片,则返回到第一张
if (n == 4) {
n = 0;
}
imgPosition(n);
};
</script>
</html>
原生动态轮播图
于 2024-05-31 15:36:18 首次发布