利用js實(shí)現(xiàn)輪播圖自動(dòng)切換

3403771864 發(fā)布于2022-10-27 21:35 / 431人閱讀

　　實(shí)現(xiàn)輪播圖自動(dòng)切換就用JS，先看效果圖

　　第一種

　　//點(diǎn)擊按鈕，序號(hào)變化
　　showIdx++;
　　if (showIdx == imgArr.length) {
　　showIdx = 0;
　　}
　　//所有盒子左移動(dòng)
　　for (let i = 0; i <items.length; i++) {
　　items[i].style.left = parseFloat(items[i].style.left) - loopbox.offsetWidth + "px";
　　}
　　//冗余容器從頁(yè)面中刪除
　　//當(dāng)冗余容器從頁(yè)面中移除后，為了保證結(jié)構(gòu)想對(duì)應(yīng)，所以呀item中數(shù)組也要把這個(gè)容器刪除
　　let deleteBox = items.shift();
　　// console.log(items);
　　deleteBox.remove();
　　//在用戶看不到的內(nèi)存中，變更【被從這個(gè)頁(yè)面刪除的元素的位置
　　deleteBox.style.left = "900px";
　　wrapper.appendChild(deleteBox);
　　items.push(deleteBox);
　　//把容器從小添加至壓面后，容器加載的圖片在當(dāng)前的下一站
　　// 第七步 把容器重新添加至頁(yè)面后，容器加載的圖片要是當(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;
　　}

　<!DOCTYPE html>
　　<html>
　　<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.分析頁(yè)面結(jié)構(gòu) -->
　　<div>
　　<div id="box">
　　<div class="box-item curr"><img src="images/1.webp"></div>
　　<div><img src="images/2.webp"></div>
　　<div><img src="images/3.webp"></div>
　　<div><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">
　　<li></li>
　　<li></li>
　　<li></li>
　　<li></li>
　　</ul>
　　</div>
　　<script>
　　// 1.5.初始化頁(yè)面，保證所有的圖片先拍成一排
　　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){
　　//點(diǎn)擊之后,點(diǎn)擊之前意味著已經(jīng)在加，需要?dú)w零
　　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(diǎn)擊序號(hào)對(duì)應(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>

　　學(xué)習(xí)要多實(shí)踐才可以多記住。