Question

我正在通过向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`;

}

Answer 1

正如@gugateider所说，如果您不希望按钮受.images上的动画影响，我将像这样将它们移出该容器：

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

然后，您可以为.image设置动画，而不会影响按钮的任何操作。

Answer 2

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

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>

在Javascript中，子节点由于其父节点而受到影响

2 个答案: