背景故事： 我想為我的網站制作一個滑塊，所以我制作了另一個“子頁面”只是為了讓事情更容易解決（它只是一個原型，所以 CSS 只是基本的樣式——如果用戶點擊箭頭，幻燈片將朝那個方向滑動，例如，如果用戶按下右箭頭，則幻燈片將滑向右側。從 JS 部分來看，這似乎是一項簡單的任務（我什至為它撰寫了代碼（未在提供的代碼）），但問題來了。
問題描述：我需要讓它作業 2 個額外的類（我將它們命名為.slideLeft和.slideRight） - 一個將其設定trasnslateX為 -100%，第二個將其設定為 100%（也許它可以在沒有類的情況下完成，但我想隔離問題）。
因此，我從.slide（基類）中提取了一些代碼.slideLeft并將其添加到 HTML（就像我對 a 所做的一樣.slide），以確保它可以作業。但事實并非如此。
那么問題來了——為什么？它在.slide班級中作業得很好，但是當我將它分開到另一個班級時，它會出現整個滑塊的故障。
注意：
我包括了作業代碼。CSS 中被注釋掉的東西會使滑塊中斷。
此外，滑塊可能看起來無法正常作業并且斷斷續續 - 那是因為我將 translateX值降低到 -50%（否則在取消注釋幻燈片后將不可見）。
代碼：
代碼筆
<!DOCTYPE html>
<html lang="en">
<head>
<title>slider</title>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="center">
<div id="slider">
<span class="sButton" onclick="NextPrevButton(-1)"> ❮</span>
<div class="slide slideLeft" id="s1" > PERFECT </div> <!-- two classes here -->
<div class="slide slideLeft" id="s2" > FLAWLESS </div> <!-- two classes here -->
<div class="slide slideLeft" id="s3" > GORGEOUS </div> <!-- two classes here -->
<div class="slide slideLeft" id="s4" > SLIDER </div> <!-- two classes here -->
<span class="sButton" onclick="NextPrevButton(1)"> ❯</span>
</div>
<div id="buttons">
<span class="sDot" onclick="chooseSlide(0)"></span>
<span class="sDot" onclick="chooseSlide(1)"></span>
<span class="sDot" onclick="chooseSlide(2)"></span>
<span class="sDot" onclick="chooseSlide(3)"></span>
</div>
</div>
</div>
</body>
</html>
.slide {
opacity: 1;
visibility: hidden;
display: none;
/* uncommenting .slideLeft (activated in html) screws up the slider,
despite being exact same thing as in that class */
transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
transform: translateX(-50%); /* translating only 50% just to show the error, destinated value is -100% */
}
.active{
opacity: 1;
z-index: -10;
visibility: visible;
transform: translateX(0);
}
/* .slideLeft{
transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
transform: translateX(-50%);
}
.slideRight{
transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
transform: translateX(50%);
} */
uj5u.com熱心網友回復：
只需放置您的 css.slideLeft和.slideRight之前.active。
它壞了，因為你覆寫transform: translateX(0)了.active選擇器
.slideLeft{
transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
transform: translateX(-50%);
}
.slideRight{
transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
transform: translateX(50%);
}
.active{
opacity: 1;
z-index: -10;
visibility: visible;
transform: translateX(0);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366457.html
標籤：javascript html css 滑块
上一篇：從行溢位的元素