<!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>
<style>
* {
padding: 0;
margin: 0;
}
.swiper {
width: 500px;
height: 300px;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
position: relative;
}
.swiper::-webkit-scrollbar {
width: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
ul {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
list-style: none;
background: transparent;
}
li {
width: 15px;
height: 15px;
background-color: rgba(0, 0, 0, .6);
margin-right: 15px;
border-radius: 50%;
cursor: pointer;
}
.active {
background-color: rgba(255, 255, 255, 0.823);
}
</style>
</head>
<body>
<div class="swiper">
<img src="./imgs/1.png" class="pics">
<img src="./imgs/2.png" class="pics">
<img src="./imgs/3.png" class="pics">
<img src="./imgs/4.png" class="pics">
<img src="./imgs/5.png" class="pics">
<img src="./imgs/6.png" class="pics"> // src 换成自己的本地图片
<ul class="swiper_said"></ul>
</div>
</body>
<script>
let activeIndex = 0
let activeArr = []
let interval = 3000
let timeId
function $(tag) { return Array.from(document.getElementsByClassName(tag)) }
$('pics').forEach((el, i) => {
el.style.transform = `translateX(${el.offsetWidth * i - el.offsetWidth * activeIndex}px)`
activeArr.push(el.offsetWidth * i)
let li = document.createElement("li")
li.dataset.index = i
if (activeIndex == i) {
li.classList.add("active")
}
$('swiper_said')[0].appendChild(li)
})
$("pics").forEach(el => {
el.style.transition = "all 1s"
})
$('swiper_said')[0].addEventListener("click", (e) => {
if (activeIndex != e.target.dataset.index && e.target.className != "swiper_said") {
activeIndex = e.target.dataset.index
clearInterval(timeId)
timeFn()
said()
}
})
timeFn()
function timeFn() {
timeId = setInterval(() => {
if (activeIndex == activeArr.length - 1) {
activeIndex = 0
} else {
activeIndex++
}
said()
}, interval)
}
function said() {
Array.from($('swiper_said')[0].children).forEach(el => {
el.classList.remove("active")
})
$('swiper_said')[0].children[activeIndex].classList.add("active")
$("pics").forEach((el, i) => {
el.style.transform = `translateX(${activeArr[i] - activeArr[activeIndex]}px)`
})
}
</script>
</html>
提供一张照片