js實現(xiàn)輪播圖自動切換
更新時間：2022年07月12日 08:40:53 作者：聰明的加菲貓
這篇文章主要為大家詳細介紹了js實現(xiàn)輪播圖自動切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)輪播圖自動切換的具體代碼，供大家參考，具體內(nèi)容如下
先看效果圖
第一種
?//點擊按鈕，序號變化
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";
?
?}
//冗余容器從頁面中刪除
?
//當(dāng)冗余容器從頁面中移除后，為了保證結(jié)構(gòu)想對應(yīng)，所以呀item中數(shù)組也要把這個容器刪除
let deleteBox = items.shift();
// console.log(items);
deleteBox.remove();
//在用戶看不到的內(nèi)存中，變更【被從這個頁面刪除的元素的位置
deleteBox.style.left = "900px";
wrapper.appendChild(deleteBox);
items.push(deleteBox);
//把容器從小添加至壓面后，容器加載的圖片在當(dāng)前的下一站
// 第七步 把容器重新添加至頁面后，容器加載的圖片要是當(dāng)前這張的下一張
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%;
? ? /* 圖片適應(yīng) */
? ? 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.分析頁面結(jié)構(gòu) -->
?<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 --;
? ? ? ? ? ?//預(yù)知判斷
? ? ? ? ? ?if(showIdx == -1){
? ? ? ? ? ? ? ?//點擊之后,點擊之前意味著已經(jīng)在加，需要歸零
? ? ? ? ? ? ? ?showIdx = 3;
? ? ? ? ? ?}
? ? ? ? ? ?items[showIdx].classList.add("curr");
? ? ? ? ? ?lis[showIdx].classList.add("current");
? ? ? ? ? ?box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
? ? ? ? // 第二張 出現(xiàn)（添加類名）showIdx+1
? ? ? ? };
? ? ? ? for(let j=0;j<lis.length;j++){
? ? ? ? ? ? lis[j].onclick ?= function(){
? ? ? ? ? ? ? ? items[showIdx].classList.remove("curr");
? ? ? ? ? ? ? ? lis[showIdx].classList.remove("current"); ?
? ? ? ? ? ? ? ? //選好變?yōu)辄c擊序號對應(yīng)結(jié)構(gòu)
? ? ? ? ? ? ? ? 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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
一般來說，顯示在最前面的窗口都是因為窗口被激活獲得焦點，要使窗口永遠顯示在最前面，可以人為的設(shè)置窗口在blur時立刻focus，或者用模式、無模式對話框?qū)崿F(xiàn)2013-07-07
JavaScrip簡單數(shù)據(jù)類型隱式轉(zhuǎn)換的實現(xiàn)
本文主要介紹了JavaScrip簡單數(shù)據(jù)類型隱式轉(zhuǎn)換的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
用Fundebug插件記錄網(wǎng)絡(luò)請求異常的方法
這篇文章主要介紹了用Fundebug插件記錄網(wǎng)絡(luò)請求異常的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
DOM是W3C制定的用于訪問諸如XML和XHTML等結(jié)構(gòu)化文檔的標準。通過本文給大家介紹JavaScript利用HTML DOM進行文檔操作的方法，需要的朋友參考下吧2016-03-03
JavaScript實現(xiàn)自己的DOM選擇器原理及代碼
實現(xiàn)自己的DOM選擇器時匹配行為也應(yīng)該和瀏覽原生匹配行為一致,接下來本文將詳細介紹下實現(xiàn)思路及方法，感興趣的你可以參考下或許對你鞏固知識有所幫助2013-03-03
優(yōu)化網(wǎng)頁之快速的呈現(xiàn)我們的網(wǎng)頁
優(yōu)化網(wǎng)頁之快速的呈現(xiàn)我們的網(wǎng)頁...2007-06-06
JavaScript用JQuery呼叫Server端方法示例代碼
這篇文章主要介紹了JavaScript用JQuery呼叫Server端方法,需要的朋友可以參考下2014-09-09
一直對Js的作用域有點迷糊，今天偶然讀到Javascript權(quán)威指南，立馬被吸引住了，寫的真不錯。我看的是第六版本，相當(dāng)?shù)暮?，大?000多頁，Js博大精深，要熟悉精通需要大毅力大功夫。謝謝心得吧2014-11-11
JavaScript讓IE瀏覽器event對象符合W3C DOM標準
IE瀏覽器event對象跟W3C實現(xiàn)的不一樣.所以自己封裝一個EventUtil類來讓IE瀏覽器的event對象與W3C一樣.2009-11-11
本文主要分享了js實現(xiàn)適合新聞類圖片輪播效果的示例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02