主页 / 问题 / 1417831
Accepted
steep
Asked:2022-08-07 19:10:08 +0000 UTC2022-08-07 19:10:08 +0000 UTC

如何设置滑块？

  • 772

如何将第二个滑块设置为可见？

var sections = document.querySelectorAll('.section_img');
var slides = document.querySelectorAll('.slider_img');
var lastIndicator = sections[0].firstElementChild;
sections.forEach(section => {
  section.addEventListener('mouseenter', mouseEnterHandler);
  section.addEventListener('mouseleave', mouseLeaveHandler);
})
function mouseEnterHandler(e) {
  lastIndicator.classList.remove('indicator_full');
  e.target.firstElementChild.classList.add('indicator_full');
  changeSlide(e.target);
}
function mouseLeaveHandler(e) {
  lastIndicator = e.target.firstElementChild;
}
function changeSlide(section) {
  slides.forEach(slide => {
    if (section.dataset.for == slide.id)
      slide.classList.remove('hidden');
    else
      slide.classList.add('hidden');
  })
}
.slider {
    height: 100vh;
    display: flex;
    width: 40%;
    position: relative;
    float: left;
    margin: 5%;
}
.slider_img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: 1s;
  opacity: 1;
}
.section_img {
  z-index: 1;
  flex-grow: 1;
  margin: 0.2rem;
  display: flex;
  align-items: flex-end;
}
.indicator {
    width: 100%;
    height: 3px;
    background-color: #fff;
    transition: 0.3s;
    opacity: 0.7;
    border-radius: 2px;
}
.indicator_full {
  background-color: #ef5350;
}
.hidden {
  opacity: 0;
}
<div class="slider">
  
<img src="https://images.unsplash.com/photo-1568781270237-f7e90fad3d2e" class="slider_img" id="bg-1">
<img src="https://images.unsplash.com/photo-1570342457319-f17b8f92df09" class="slider_img hidden" id="bg-2">
  <div class="section_img" data-for="bg-1">
    <div class="indicator indicator_full"></div>
  </div>
  <div class="section_img" data-for="bg-2">
    <div class="indicator"></div>
 </div>
  
</div>


<div class="slider">
  
<img src="https://images.unsplash.com/photo-1568438350562-2cae6d394ad0" class="slider_img" id="bg-3">
<img src="https://images.unsplash.com/photo-1569742676615-3cbdc18ce09e" class="slider_img hidden" id="bg-4">
  <div class="section_img" data-for="bg-3">
    <div class="indicator indicator_full"></div>
  </div>
  <div class="section_img" data-for="bg-4">
    <div class="indicator"></div>
 </div>
  
</div>

javascript

1 个回答

  1. Best Answer

    您需要分别为每个滑块分配逻辑，以便一个事件不会覆盖第二个事件的数据：

    const sliders = document.querySelectorAll('.slider');

sliders.forEach(slider => {
  const sections = slider.querySelectorAll('.section_img');
  const slides = slider.querySelectorAll('.slider_img');

  sections.forEach(section => {
    section.addEventListener('mouseenter', (e) => mouseEnterHandler(e, slides));
    section.addEventListener('mouseleave', (e) => mouseLeaveHandler(e));
  })
})

function mouseEnterHandler(e, slides) {
  e.target.firstElementChild.classList.add('indicator_full');
  changeSlide(e.target, slides);
}

function mouseLeaveHandler(e) {
  e.target.firstElementChild.classList.remove('indicator_full');
}

function changeSlide(section, slides) {
  slides.forEach(slide => {
    slide.classList.toggle('hidden', section.dataset.for !== slide.id);
  })
}
    .slider {
  height: 100vh;
  display: flex;
  width: 40%;
  position: relative;
  float: left;
  margin: 5%;
}

.slider_img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: 1s;
  opacity: 1;
}

.section_img {
  z-index: 1;
  flex-grow: 1;
  margin: 0.2rem;
  display: flex;
  align-items: flex-end;
}

.indicator {
  width: 100%;
  height: 3px;
  background-color: #fff;
  transition: 0.3s;
  opacity: 0.7;
  border-radius: 2px;
}

.indicator_full {
  background-color: #ef5350;
}

.hidden {
  opacity: 0;
}
    <div class="slider">

  <img src="https://images.unsplash.com/photo-1568781270237-f7e90fad3d2e" class="slider_img" id="bg-1">
  <img src="https://images.unsplash.com/photo-1570342457319-f17b8f92df09" class="slider_img hidden" id="bg-2">
  <div class="section_img" data-for="bg-1">
    <div class="indicator indicator_full"></div>
  </div>
  <div class="section_img" data-for="bg-2">
    <div class="indicator"></div>
  </div>

</div>


<div class="slider">

  <img src="https://images.unsplash.com/photo-1568438350562-2cae6d394ad0" class="slider_img" id="bg-3">
  <img src="https://images.unsplash.com/photo-1569742676615-3cbdc18ce09e" class="slider_img hidden" id="bg-4">
  <div class="section_img" data-for="bg-3">
    <div class="indicator indicator_full"></div>
  </div>
  <div class="section_img" data-for="bg-4">
    <div class="indicator"></div>
  </div>

</div>

    • 1

相关问题