时间戳

首页 > 解决方案 > 在Javascript中，子节点因其父节点而受到影响

javascript - 在Javascript中，子节点因其父节点而受到影响

问题描述

我正在通过向 youtube 学习制作图像滑块。一切都很顺利，但我对一个问题感到好奇。您知道，在滑块中，有两个按钮（上一个按钮和下一个按钮）。我写了一个代码

container.animate([{opacity:'0.1'}, {opacity:'1'}], {duration: 1000, fill:'forwards'});

这段代码很好，很好，很漂亮，但它也会影响按钮。我不希望这种情况发生。

我试图添加buttons.animate([{opacity:'1'},{opacity:'1'}],{duration:1, fill:'forwards'});功能。

<div class="images">
    <button id="previous" type="button">Prev</button>
    <button id="next" type="button">Next</button>
</div>


const prevButton = document.querySelector('#previous');
const nextButton = document.querySelector('#next');
const container = document.querySelector('.images');
const buttons = prevButton && nextButton;

let counter = 0;

prevButton.addEventListener('click', prev);
nextButton.addEventListener('click', next);

function next(){
    container.animate([{opacity:'0.1'}, {opacity:'1'}], {duration: 1000, fill:'forwards'});
    counter++;
    while(counter > 4){
    counter = 0;
    }
    container.style.background = `url(images/image${counter}.jpg)center/cover no-repeat`;
}

function prev(){
    container.animate([{opacity:'0.1'}, {opacity:'1'}], {duration: 1000, fill:'forwards'});
    counter--
    while(counter < 0){
        counter = 4;
    }
    container.style.background = `url(images/image${counter}.jpg)center/cover no-repeat`;

}

标签： javascripthtmlcss

解决方案

不透明度将影响每个后代元素。来自MDN 不透明度：

opacity适用于整个元素，包括其内容，即使该值不被子元素继承。因此，元素及其子元素相对于元素的背景都具有相同的不透明度，即使它们彼此之间具有不同的不透明度。

由于opacity不是继承opacity: 1的，因此应用于孩子不会做任何事情，因为您不会重置继承的值。

我喜欢把正在发生的事情想象成一个过滤器。

我建议将单个幻灯片的上一个和下一个元素移到容器之外。许多滑块将具有类似于此的结构：

<div class="slider">
  <div class="slides">
    <img class="slide">
    <img class="slide">
    <!-- Instead of a IMG tag, this could be a DIV to hold text/etc. -->
  </div>
  <div class="slider-controls">
    <button class="slider-control prev">Prev</button>
    <button class="slider-control next">Next</button>
  </div>
</div>

推荐阅读