js實現輪播圖自動切換
本文實例為大傢分享瞭js實現輪播圖自動切換的具體代碼，供大傢參考，具體內容如下
先看效果圖
第一種
//點擊按鈕，序號變化
showIdx++;
if (showIdx == imgArr.length) {
showIdx = 0;
}
//所有盒子左移動
for (let i = 0; i <items.length; i++) {
items[i].style.left = parseFloat(items[i].style.left) - loopbox.offsetWidth + "px";
}
//冗餘容器從頁面中刪除
//當冗餘容器從頁面中移除後，為瞭保證結構想對應，所以呀item中數組也要把這個容器刪除
let deleteBox = items.shift();
// console.log(items);
deleteBox.remove();
//在用戶看不到的內存中，變更【被從這個頁面刪除的元素的位置
deleteBox.style.left = "900px";
wrapper.appendChild(deleteBox);
items.push(deleteBox);
//把容器從小添加至壓面後，容器加載的圖片在當前的下一站
// 第七步 把容器重新添加至頁面後，容器加載的圖片要是當前這張的下一張
if (showIdx == imgArr.length - 1) {
deleteBox.innerHTML = `<img src=${imgArr[0]}>`;
} else {
deleteBox.innerHTML = `<img src=${imgArr[showIdx + 1]}>`;
}
第二種，圖片切換，css代碼
html,
body,
ul,
li {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.loopbox {
width: 1226px;
height: 460px;
background: #030;
position: relative;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
float: left;
transition: all .3s;
position: absolute;
left: 0;
/* overflow: hidden; */
}
.box.notran{
transition: none;
}
.box-item {
/* width: 100%; */
width: 1226px;
height: 100%;
float: left;
background: #f1f1f1;
text-align: center;
font-size: 24px;
line-height: 100px;
/* display: none; */
/* transition: all .3s; */
}
.box-item img {
width: 100%;
height: 100%;
/* 圖片適應 */
object-fit: cover;
}
.arrow {
width: 60px;
line-height: 30px;
background: #f00;
text-align: center;
color: #f1f1f1;
position: absolute;
top: 50%;
left: 10px;
margin-top: -15px;
border-radius: 15px;
}
.arrow:hover {
background: #f60;
}
.arrow.arrow-right {
left: auto;
right: 10px;
}
.page {
position: absolute;
width: 100%;
text-align: center;
bottom: 10px;
}
.page li {
display: inline-block;
width: 80px;
height: 8px;
border-radius: 4px;
background: #000;
}
/* .page li:first-child {
background: #f90;
} */
.page li:hover {
background: #f60;
}
.page li.current {
background: #f90;
}
.side-qq {
width: 100px;
height: 100px;
background: #f00;
/* position: fixed; */
position: absolute;
right: 10px;
top: 450px;
}
.navbar {
width: 100%;
background: #ccc;
text-align: center;
}
.navbar.fixed {
position: fixed;
left: 0;
top: 0;
}
.nav {
height: 21px;
}
js
<!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>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 1.分析頁面結構 -->
<div class="loopbox">
<div id="box" class="box">
<div class="box-item curr"><img src="images/1.webp"></div>
<div class="box-item"><img src="images/2.webp"></div>
<div class="box-item"><img src="images/3.webp"></div>
<div class="box-item"><img src="images/4.webp"></div>
</div>
<a class="arrow arrow-left" href="javascript:;">左</a>
<a class="arrow arrow-right" href="javascript:;">右</a>
<ul id="page" class="page">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 1.5.初始化頁面，保證所有的圖片先拍成一排
let items = document.querySelectorAll(".box-item");
let lis = document.querySelectorAll(".page li");
let leftBtn=document.querySelector(".arrow-left")
let box = document.querySelector(".box");
let loopbox = document.querySelector(".loopbox");
box.style.width = items.length * loopbox.offsetWidth + "px";
box.style.left = 0+"px";
// 2.分析功能入口
let rightBtn = document.querySelector(".arrow-right");
let showIdx = 0;
rightBtn.onclick = function (){
items[showIdx].classList.remove("curr");
lis[showIdx].classList.remove("current");
showIdx ++;
if(showIdx == 4){
showIdx = 0;
}
items[showIdx].classList.add("curr");
lis[showIdx].classList.add("current");
box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
for(let i=0;i<lis.length;i++){
lis[i].onclick =function(){
items[showIdx].classList.remove("curr");
lis[showIdx].classList.remove("current");
showIdx=i;
items[showIdx].classList.add("curr");
lis[showIdx].classList.add("current");
}
}
leftBtn.onclick = function(){
//第一張 消失（取消類名）
items[showIdx].classList.remove("curr");
lis[showIdx].classList.remove("current");
showIdx --;
//預知判斷
if(showIdx == -1){
//點擊之後,點擊之前意味著已經在加，需要歸零
showIdx = 3;
}
items[showIdx].classList.add("curr");
lis[showIdx].classList.add("current");
box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
// 第二張 出現（添加類名）showIdx+1
};
for(let j=0;j<lis.length;j++){
lis[j].onclick = function(){
items[showIdx].classList.remove("curr");
lis[showIdx].classList.remove("current");
//選好變為點擊序號對應結構
showIdx=j;
items[showIdx].classList.add("curr");
lis[showIdx].classList.add("current");
}
}
}
function time(){
items[showIdx].classList.remove("curr");
lis[showIdx].classList.remove("current");
showIdx ++;
if(showIdx == 4){
showIdx = 0;
}
items[showIdx].classList.add("curr");
lis[showIdx].classList.add("current");
box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
}
for(let i=0;i<lis.length;i++){
lis[i].onclick =function(){
items[showIdx].classList.remove("curr");
lis[showIdx].classList.remove("current");
showIdx=i;
items[showIdx].classList.add("curr");
lis[showIdx].classList.add("current");
}
}
setInterval(time,3000)
</script>
</body>
</html>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。