提前為任何錯誤/糟糕的編碼道歉。
我從這個原始教程改編了以下內容:https://www.youtube.com/watch? v = dzqdu 9 efn NK & amp；t=61s
當我把它應用到我的代碼中時，似乎出現了一個問題，我不確定在代碼的什么地方。我能看到的三個主要問題是左邊的圖像比右邊的大，整個容器周圍的大填充，以及滑塊javascript不起作用。
對此，任何幫助都將不勝感激。
請記住，當談到編碼技能時，我有點白癡，所以如果你能盡可能地簡化你的答案，那將非常感謝。
HTML:
<main class="led-main">
<div class="led-container">
<div class="led-image-container">
<img
class="led-image-before led-slider-image"
src="/images/products/multiservice-chilled-beams/led-lighting-replacement/101-new-cavendish-before-led-lighting-upgrade.jpg"
alt="Before LED Lighting Upgrade" title="Image showing the project before the LED lighting upgrade"
loading="lazy"
/>
<img
class="led-image-after led-slider-image"
src="/images/products/multiservice-chilled-beams/led-lighting-replacement/101-new-cavendish-after-led-lighting-upgrade.jpg"
alt="After LED Lighting Upgrade" title="Image showing the project after the LED lighting upgrade"
loading="lazy"
/>
</div>
<input type="range" min="0" step="10" max="100" value="50" class="led-slider" aria-label="Percentage of before photo shown"/>
<div class="slider-line"></div>
<div class="led-slider-button" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#000000" viewBox="0 0 256 256"><path d="M136,40V216a8,8,0,0,1-16,0V40a8,8,0,0,1,16,0ZM96,120H35.31l18.35-18.34A8,8,0,0,0,42.34,90.34l-32,32a8,8,0,0,0,0,11.32l32,32a8,8,0,0,0,11.32-11.32L35.31,136H96a8,8,0,0,0,0-16Zm149.66,2.34-32-32a8,8,0,0,0-11.32,11.32L220.69,120H160a8,8,0,0,0,0,16h60.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,245.66,122.34Z"></path></svg>
</div><br>CSS:
.led-main{
display: grid;
place-items: center;
min-height: 100vh;
}
.led-container{
display: grid;
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
--position: 50%
}
.led-image-container{
max-width: 800px;
max-height: 90vh;
aspect-ratio: 16/9;
}
.led-slider-image{
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.led-image-before{
position: absolute;
inset: 0;
width: var(--position);
}
.led-slider{
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
width: 100%;
height: 100%;
}
.led-slider:focus-visible ~ .led-slider-button {
outline: 2px solid black;
outline-offset: 3px;
}
.slider-line{
position: absolute;
inset: 0;
width: .2rem;
height: 100%;
background-color: #fff;
z-index: 10;
left: var(--position);
transform: translateX(-50%)
pointer-events: none;
}
.led-slider-button{
position: absolute;
background-color: #fff;
color: black;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}JavaScript:
<script type="text/javascript">
const container = document.querySelector('led-container');
document.querySelector('.led-slider').addEventListener
('input' (e) => {
container.style.setProperty('--position',
`${e.target.value}%`)
})
</script>您的圖像缺少一個顯示塊
只需將此添加到您的代碼中，兩幅圖像的大小應該相同。
img {
display: block
}如果你需要更多關于顯示/顯示塊的信息，你可以在這里找到Mozilla或者w3schools
您在action中提供的代碼將顯示塊應用于圖像:帶有一些占位符圖像
const container = document.querySelector('led-container');
document.querySelector('.led-slider').addEventListener('input', (e) => {
container.style.setProperty('position',
`${e.target.value}%`)
})img {
display: block
}
.led-main {
display: grid;
place-items: center;
min-height: 100vh;
}
.led-container {
display: grid;
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
--position: 50%
}
.led-image-container {
max-width: 800px;
max-height: 90vh;
aspect-ratio: 16/9;
}
.led-slider-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.led-image-before {
position: absolute;
inset: 0;
width: var(--position);
}
.led-slider {
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
width: 100%;
height: 100%;
}
.led-slider:focus-visible~.led-slider-button {
outline: 2px solid black;
outline-offset: 3px;
}
.slider-line {
position: absolute;
inset: 0;
width: .2rem;
height: 100%;
background-color: #fff;
z-index: 10;
left: var(--position);
transform: translateX(-50%) pointer-events: none;
}
.led-slider-button {
position: absolute;
background-color: #fff;
color: black;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}<main class="led-main">
<div class="led-container">
<div class="led-image-container">
<img class="led-image-before led-slider-image" src="https://techcrunch.com/wp-content/uploads/2021/07/GettyImages-1207206237.jpg?w=1390&crop=1" alt="Before LED Lighting Upgrade" title="Image showing the project before the LED lighting upgrade" loading="lazy"
/>
<img class="led-image-after led-slider-image" src="https://static01.nyt.com/images/2020/12/14/well/14google-photo/merlin_178797099_f0a14fdb-8c54-4aad-ba09-4506303b06c3-superJumbo.jpg?quality=75&auto=webp" alt="After LED Lighting Upgrade" title="Image showing the project after the LED lighting upgrade"
loading="lazy" />
</div>
<input type="range" min="0" step="10" max="100" value="50" class="led-slider" aria-label="Percentage of before photo shown" />
<div class="slider-line"></div>
<div class="led-slider-button" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#000000" viewBox="0 0 256 256"><path d="M136,40V216a8,8,0,0,1-16,0V40a8,8,0,0,1,16,0ZM96,120H35.31l18.35-18.34A8,8,0,0,0,42.34,90.34l-32,32a8,8,0,0,0,0,11.32l32,32a8,8,0,0,0,11.32-11.32L35.31,136H96a8,8,0,0,0,0-16Zm149.66,2.34-32-32a8,8,0,0,0-11.32,11.32L220.69,120H160a8,8,0,0,0,0,16h60.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,245.66,122.34Z"></path></svg>
</div><br>第一個問題是您的JavaScript代碼。事件偵聽器函數中有語法錯誤。“input”事件后缺少一個逗號和一個右括號，應該使用。led容器而不是led容器。下面是更正后的代碼:
const container = document.querySelector('.led-container');
document.querySelector('.led-slider').addEventListener('input', (e) => {
container.style.setProperty('--position', `${e.target.value}%`);
});上一篇dict轉為json串