完美轮播图源码如下：
<!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>
* {
margin: 0;
padding: 0;
}
body{
background-color: aqua;
}
ul {
list-style: none;
}
/* 外面的大盒子 */
#wrap {
overflow: hidden;
position: relative;
width: 585px;
height: 467px;
margin: 100px auto 0;
}
#wrap .img-list {
display: flex; /* 这样子图片就是水平排列 */
position: relative;
left: 0px;
width: 100%;
height: 100%;
transform: 0.5s ease;/* 添加过渡效果 */
}
#wrap .img-list img {
width: 100%;
height: 100%;
cursor: pointer;/* 鼠标小手 */
}
/* a里放 小箭头 */
#wrap a {
position: absolute;
top: 50%;
transform: translate(0, -50%);
display: block;
width: 40px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
user-select: none;
font-size: 30px;
text-align: center;
line-height: 50px;
text-decoration:none ;
}
#wrap a.left {
left: 0px;
}
#wrap a.right {
right: 0px;
}
.circle-list {
display: flex;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
width: 200px;
height: 40px;
z-index: 8;
/* z-index设置元素的堆叠顺序 */
}
.circle-list>.circle {
margin: 0 5px;
background-color: #ecf0f1;
width: 30px;
height: 30px;
border-radius: 50%;
}
/* 同时有circle和active类名的，颜色就变成黄色 */
.circle-list>.circle.active {
background-color: yellow;
}
</style>
</head>
<body>
<div id="wrap">
<!-- 图片列表 -->
<div class="img-list">
<img src="../pictures/lbt1.jpg" alt="">
<img src="../pictures/lbt2.jpg" alt="">
<img src="../pictures/lbt3.jpg" alt="">
<img src="../pictures/lbt4.jpg.webp" alt="">
<img src="../pictures/lbt5.jpg.webp" alt="">
</div>
<!-- 小箭头 -->
<div>
<a class="left" href="javascript:;"><</a>
<a class="right" href="javascript:;">></a>
</div>
<!-- 小圆点 -->
<ul class="circle-list">
<li class="circle active" data-n="0"></li>
<li class="circle" data-n="1"></li>
<li class="circle" data-n="2"></li>
<li class="circle" data-n="3"></li>
<li class="circle" data-n="4"></li>
</ul>
</div>
<script>
// 获取左右按钮和图片列表
let oLeft = document.querySelector(".left")
let oRight = document.querySelector(".right")
let oImagList=document.querySelector(".img-list")
// console.log(typeof(oLeft));//obj
let clonefirstImg=oImagList.firstElementChild.cloneNode()//克隆第一张图片
oImagList.appendChild(clonefirstImg)//将第一张图片添加到图片列表的结尾 用假图替换
真图
// 图片索引 代表当前是第几张图片 index=0时就是第一张图片
let index=0
// 设置函数节流锁
let lock=true
function handleRightBtn(){
if(!lock)return
index++
oImagList.style.left=-585*index+"px"
// 这里要加回过渡，因为切换到了最后一张假图时要将过渡去掉 其他时候都是要过渡的
oImagList.style.transition="0.5s ease"
if(index===5){
index=0
setTimeout(() => {
oImagList.style.left=0
// 取消过渡，500毫秒后切换第一张
oImagList.style.transition="none"
}, 500);//这个500毫秒对应于上面的过渡时间0.5s 等这个假图过了0.5s的过渡后，
//再把他跳到第一张图去，并把这时过渡去掉,
// index=5时实际上播放的是假图,当过渡完成后，马上切换到真正的第一张图片
}
// 设置小圆点的高亮
setCircles()
lock=false//关锁
setTimeout(() => {
lock=true
}, 500);
}
// 右按钮的实现
oRight.addEventListener("click",handleRightBtn)//这里是接受函数。不用让函数执行
// 左按钮的实现
oLeft.addEventListener("click",()=>{
if(!lock)return
index--
if(index===-1){ //先瞬间到假图，然后再到最后一张真图 拉到真图的过程需要用过渡
index=4
oImagList.style.left=5*-585+"px"//当index=-1,瞬间切换到假图这里
oImagList.style.transition="none"//切换到假图时，就把过渡去掉
setTimeout(() => {//上面的先执行，定时器里后执行
// index=4
oImagList.style.left=-585*index+"px"
oImagList.style.transition="0.5s ease"//切换到真图时，要加回过渡
}, 0);
}else{ //当index=-1时就执行上面的操作，不等于-1时就正常执行
oImagList.style.left=-585*index+"px"
}
// 设置小圆点的高亮
setCircles()
lock=false//关锁
setTimeout(() => {
lock=true
}, 500);
})
// 小圆点
const circles=document.querySelectorAll(".circle")
// console.log(circles);//NodeList类数组
// 小圆点高亮的显示
function setCircles(){
for(let i=0;i<circles.length;i++){
if(i===index){
circles[i].classList.add("active")
}else{
circles[i].classList.remove("active")
}
}
}
// 小圆点点击切换图片 使用事件代理 给父亲绑定点击事件就可，通过冒泡。里面的孩子点击后会触发这个
const oCircle=document.querySelector(".circle-list")
oCircle.addEventListener("click",(e)=>{
// console.log(e.target);//li
// 当我们点击小圆点的时候
if(e.target.nodeName.toLowerCase()==="li"){ //toLowerCase()把字符串变成小写
// 当前元素的data-n对应的值 和index一一对应
const n=Number(e.target.getAttribute("data-n"));
index=n
setCircles()
oImagList.style.left=index*-585+"px"
}
})
// 自动轮播
let autoplay=setInterval(()=>{handleRightBtn()},2000)
const oWrap=document.getElementById("wrap")
// 鼠标进入停止轮播
oWrap.addEventListener("mouseenter",()=>{
clearInterval(autoplay)
})
// 鼠标移出继续轮播
oWrap.addEventListener("mouseleave",()=>{
//这一步是 设表先关
clearInterval(autoplay)
autoplay=setInterval(()=>{handleRightBtn()},2000)//重新给autoplay赋值
})
</script>
</body>
</html>创作不易，如果觉得不错，可以点个关注~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/126765.html
