淘先锋技术网

首页 1 2 3 4 5 6 7

前后图像滑块不起作用

提前为任何错误/糟糕的编码道歉。

我从这个原始教程改编了以下内容: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}%`);
});