为什么控制按钮在我的幻灯片中不起作用？

Question

我制作了宽度为 4 的不透明度为 1 和 z-index：2 的照片，我可以自动制作它运行，但要控制它，还没有，这是我的 js 代码一些 jquery:

$(document).ready(function() {
var i = 0
function next() {
    move(i++);
    if (i === 4) {
        i = 0
    }
    console.log("first i = " + i)
};
setInterval(next, 2000);
function move(n) {
    var images = document.querySelectorAll('img')
    var img = images[n]
    $(img).addClass('showSlide')
    $(img).removeClass('hideSlide')
    $(img).siblings(".img").addClass('hideSlide')
}
$('.next').click(

    () => {
        if (i === 3) {
            i = 0
        };
        move(i++);
        console.log("next i = " + i)
    }
)
$('.previous').click(
    () => {
        if (i === 0) {
            i = 3
        };
        move(i--);
        console.log("previous i = " + i)
    }
)})

我的自动幻灯片工作，但是当我单击下一个或上一个按钮时，幻灯片不会从最后一个位置继续，我的 HTML 代码是：

 <div class="container">
        <button class="next">next</button>
        <button class="previous">previous</button>
        <img class="img" src="gallery-img7.jpg" alt="">
        <img class="img" src="gallery-img2.jpg" alt="">
        <img class="img" src="gallery-img8.jpg" alt="">
        <img class="img" src="gallery-img3.jpg" alt="">
    </div>

Answer 1

我认为您触发下一次和上一次点击的代码基本上可以正常工作，您使用的 Interval 函数运行永远不会被您的按钮点击打断，因此幻灯片会继续循环播放。

您要显示和隐藏的类可能也没有正确附加到 DOM。我发现在附加特定幻灯片之前附加不太具体的类是一个很好的做法，即一揽子隐藏所有幻灯片然后显示所选幻灯片。

我认为另一种有用的技术是首先尝试找出手动用户交互，然后将我的自动化建立在它的基础上。我已经对您发布的代码进行了更改，其中幻灯片 'slide' 通过触发下一个动作本身，类似于用户的方式。

因此幻灯片应该在页面加载时通过声明的 setInterval 自行开始。当用户将鼠标移动到幻灯片区域时，setInterval 被中断 - 这样按钮将控制 active/shown 幻灯片。如果您将鼠标移开或远离幻灯片容器，则允许 setInterval 再次启动，幻灯片应自动循环。

$(document).ready(function() {
        var i = 0;

        function move(n) {
            var images = document.querySelectorAll('img');
            var img = images[n];
            $(img).siblings(".img").addClass('hideSlide');
            $(img).siblings(".img").removeClass('showSlide');
            $(img).addClass('showSlide');
            $(img).removeClass('hideSlide');
        }

        var next = setInterval(autoRotate, 2000);

        function autoRotate() {
            $('.next').trigger('click');
        }

        $('.container').on('mouseenter', function() {
          clearInterval(next);
        });

        $('.container').on('mouseleave', function() {
          next = setInterval(autoRotate, 2000);
        });


        $('.next').click(() => {
           if (i === 3) {
             i = 0;
           } else {
            i++;
           }
           move(i);
        });

        $('.previous').click(() => {
            if (i === 0) {
              i = 3;
            } else {
                i--;
            }
            move(i);
        });
    })

Answer 2

我认为您处理增量和减量的方式可能是问题所在？这是模 % 的一个很好的用例。我还清除并重置了按钮单击后的间隔，以便在新显示的图像上获得相同的间隔。这是一个似乎符合您预期的示例：

$(document).ready(function() {
var i = 0
function next() {
    move(i++);
};

let nextInterval = setInterval(next, 2000);
function move(n) {
    clearInterval(nextInterval)
    nextInterval = setInterval(next, 2000);
    n = i%4;
    var images = document.querySelectorAll('img')
    var img = images[n]
    $(img).addClass('showSlide')
    $(img).removeClass('hideSlide')
    $(img).siblings(".img").addClass('hideSlide')
}
$('.next').click(

    () => {
        move(i++);
    }
)
$('.previous').click(
    () => {
        move(i--);
    }
)})

.img{
  display:block;
  width:100px;
  height:100px;
}
.showSlide{
  display:block;
}
.hideSlide{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="container">
        <button class="next">next</button>
        <button class="previous">previous</button>
        <img class="img" src="https://via.placeholder.com/100x100.png?text=1" alt="">
        <img class="img hideSlide"   src="https://via.placeholder.com/100x100.png?text=2" alt="">
        <img class="img hideSlide"  src="https://via.placeholder.com/100x100.png?text=3" alt="">
        <img class="img hideSlide" src="https://via.placeholder.com/100x100.png?text=4" alt="">
    </div>

为什么控制按钮在我的幻灯片中不起作用？

why the control button do not work in my slideshow?

javascript

slideshow