css 仍在单击重叠幻灯片

92dk7w1h  于 2023-01-10  发布在  其他
关注(0)|答案(1)|浏览(128)

我把不透明度设置为0的幻灯片仍然可以点击,即使我把指针事件设置为无。基本上我有2张幻灯片在这个幻灯片上,即使我在第一张幻灯片上点击它,它转到第二个幻灯片超链接。Image此图像显示代码正在正确更改指针事件和不透明度,但由于某种原因,当我单击网站,它仍然把我发送到第二个幻灯片超链接。

//programming slideshow

        $(function () {
            var slide_index = 1;
            displaySlides(slide_index);
            function nextSlide() {
                displaySlides(slide_index++);
            }
            function prevslide() {
                displaySlides(slide_index--);
            }
            function displaySlides() {
                var i;
                var slides = document.getElementsByClassName("programming-slides");
                if (slide_index > slides.length) { slide_index = 1 }
                if (slide_index < 1) { slide_index = slides.length }
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.opacity = 0;
                }
                slides[slide_index - 1].style.opacity = 1;
                for (var i = 0; i < slides.length; i++) {
                    // If the slide is not visible, set its pointer-events to none
                    if (slides[i].style.opacity === '0') {
                        slides[i].style.pointerEvents = 'none';
                    } else {
                        // Otherwise, set its pointer-events to auto
                        slides[i].style.pointerEvents = 'auto';
                    }
                }
            }
            var next = document.getElementById('programming-next');
            next.addEventListener('click', nextSlide);

            var prev = document.getElementById('programming-prev');
            prev.addEventListener('click', prevslide);
        })
voase2hg

voase2hg1#

我开始修复它,在幻灯片js的代码中添加了z index,也添加了一些其他css元素,修复了重叠问题,现在所有的功能都正常工作了

for (var i = 0; i < slides.length; i++) {
  // If the slide is not visible, set its pointer-events to none 
  if (slides[i].style.opacity === '0') {
    slides[i].style.pointerEvents = 'none';
    slides[i].style.zIndex = 0;
  } else {
    // Otherwise, set its pointer-events to auto
    slides[i].style.pointerEvents = 'auto';
    slides[i].style.zIndex = 1;
  }

相关问题