JavaScript 轮播图"/>
JavaScript 轮播图
仅提供学习和参考使用
html部分
<!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>
</head>
<link rel="stylesheet" href="./css/test.css">
<body><!-- 1.分析页面结构 --><div class="slide-container"><div class="slide-wrapper"></div><span class="slide-btn slideshow-left" id="leftBtn"></span><span class="slide-btn slideshow-right" id="rightBtn"></span><div class="slide-page"><ul><li class="dds navdd"></li><li class="dds"></li><li class="dds"></li><li class="dds"></li><li class="dds"></li></ul></div></div><script src="./js/test.js"></script>
</body>
</html>加一点点css
.slide-container {width: 900px;height: 400px;margin: 50px auto;position: relative;overflow: hidden;
}.slide-wrapper {position: relative;width: 100%;height: 100%;
}
.slide-wrapper img{transition: all .3s;
}.slide-item {width: 100%;height: 100%;position: absolute;float: left;transition: all .3s;
}.slide-item img {width: 100%;height: 100%;object-fit: cover;
}.slide-item-selected {display: block;
}.slide-btn {position: absolute;top: 50%;width: 50px;height: 50px;background-color: rgba(0, 0, 0, .5);margin-top: -25px;text-align: center;line-height: 50px;color: #fff;cursor: pointer;background-repeat: no-repeat;background-position: center center;border-radius: 50%;
}.slideshow-left {left: 5px;background-image:url(../img/left.png);
}
.slideshow-right {right: 5px;background-image: url(../img/right.png);
}.slide-page {position: absolute;bottom: 20px;width: 100%;height: 20px;display: flex;justify-content: center;
}.slide-page-item {display: inline-block;width: 15px;height: 15px;background-color: rgba(0, 0, 0, .5);border-radius: 50%;margin: 0 10px;cursor: pointer;
}.slide-page ul::after{content: "";clear: both;display: block;
}
.slide-page li{list-style: none;
}
.dds{float: left;width: 10px;height: 10px; background-color: skyblue;border-radius:50%;margin: 10px;
}
.slide-page li:nth-child(n):hover{background-color: tomato;
}
.navdd{background-color: tomato;
}
在加一点点js
/*** date:2021.12.22* name:@前端小白？* * **/// 1.数据结构
var imgsArr=["./img/img1.png","./img/img2.png","./img/img3.png","./img/img4.png","./img/img5.gif"
];
// 获取存放图片的容器
var imgs = document.querySelector(".slide-wrapper");
var cont = document.querySelector(".slide-container");
var dd=document.querySelectorAll(".slide-page>ul>li");
var items = [];
var index = 0;
var index2=0;
// 2.初始化页面结构
incont();
// 3.功能入口
// items[0].innerHTML = `<img src=${imgsArr[imgsArr.length-1]}>`;
rightBtn.onclick=function(){ // 点击页码加一index++;// 阈值判断if(index<imgsArr.length){items[0].innerHTML = `<img src=${imgsArr[imgsArr.length-index]}>`; }else if(index==0){items[0].innerHTML = `<img src=${imgsArr[imgsArr.length-1]}>`; }else{index=0;items[0].innerHTML = `<img src=${imgsArr[0]}>`;}for (let i = 0; i < items.length; i++) {items[i].style.left= parseFloat(items[i].style.left)+cont.offsetWidth+"px"; }//删除最右面的容器items[2].remove();var addItem=items.pop();addItem.style.left="-900px"// 将最右面的容器添加到左面imgs.insertBefore(addItem,items[0]);items.splice(0,0,addItem);addItem.style.left=parseFloat(items[0].style.left)+"px";// 分页器index2++;for (let j = 0; j < dd.length; j++) {dd[j].classList.remove("navdd")}if(index2<dd.length){dd[dd.length-index2].classList.add("navdd")}else{index2=0;dd[index2].classList.add("navdd")}}
leftBtn.onclick=btn;
function btn(){index++;for (let i = 0; i < items.length; i++) {items[i].style.left= parseFloat(items[i].style.left)-cont.offsetWidth+"px"; }// 删除最左面的容器items[0].remove(); var deltIteam=items.shift();// 将删除的容器添加到最右侧deltIteam.style.left=cont.offsetWidth+"px";imgs.appendChild(deltIteam);items.push(deltIteam);// 阈值判断if(index==imgsArr.length-1){items[2].innerHTML = `<img src=${imgsArr[0]}>`;}else if(index==imgsArr.length){index=0;items[2].innerHTML=`<img src=${imgsArr[index+1]}>`;}else{items[2].innerHTML=`<img src=${imgsArr[index+1]}>`;}// 分页器for (let j = 0; j < dd.length; j++) {dd[j].classList.remove("navdd")}dd[index].classList.add("navdd")
}
// 分页器点击事件
for (let i = 0; i < dd.length; i++) {dd[i].num=i;dd[i].onclick=function(){index=this.num;console.log(index);items[1].innerHTML=`<img src="${imgsArr[index]}">`;for (let j = 0; j < dd.length; j++) {dd[j].classList.remove("navdd")}dd[i].classList.add("navdd")}
}
// 自动播放
var timer=setInterval(()=>{btn()}, 1000);
cont.addEventListener("mouseover",()=>{clearInterval(timer);
});
cont.addEventListener("mouseout",()=>{timer=setInterval(()=>{btn()}, 1000);
})// 工具函数
function incont(){// 三容器// 容器1var cont1=document.createElement("div");cont1.classList.add("slide-item");cont1.classList.add("slide-item-0");cont1.style.left=(-1)*cont.offsetWidth+"px";imgs.appendChild(cont1);items.push(cont1);// 容器2var cont2=document.createElement("div");cont2.classList.add("slide-item");cont2.classList.add("slide-item-1");cont2.innerHTML=`<img src="${imgsArr[0]}">`;cont2.style.left=(0)*cont.offsetWidth+"px";imgs.appendChild(cont2);items.push(cont2);// 容器3var cont3=document.createElement("div");cont3.classList.add("slide-item");cont3.classList.add("slide-item-2");cont3.innerHTML=`<img src="${imgsArr[1]}">`;cont3.style.left=(1)*cont.offsetWidth+"px";imgs.appendChild(cont3);items.push(cont3);}
更多推荐
JavaScript 轮播图
发布评论