Question

编辑：我通过改变=到=来解决了这个问题，但是并没有完全解决它，但后来我添加了对$ currentSlide的更改，现在它可以了！耶！

            $(document).keydown(function(e) {
            if(e.keyCode == 39)
                {
                    if($currentSlide == $slide1){
                        slideShow(slide2);
                        $currentSlide = $slide2;
                    }
                    else if($currentSlide == $slide2){
                        slideShow(slide3);
                        $currentSlide = $slide3;
                    }
                    else if($currentSlide == $slide3){
                        slideShow(slide1);
                        $currentSlide = $slide1;
                    }
                }
        })

我已经找到了答案，但没有找到任何适合我的问题。我是一个javascript的菜鸟所以忍受我。

我有一个可以用作幻灯片的功能。 （我在我的jquery变量前面使用$，我也有很多javascript变量，所以我只是用它来分隔它们。）

var $currentSlide = "#slide1";
var $slide1 = "#slide1";
var $slide2 = "#slide2";
var $slide3 = "#slide3";

function slideShow($slide) {
    if ($slide != $currentSlide){
        $($currentSlide).fadeOut(500);
        $($slide).delay(500).fadeIn(500);
        $currentSlide = $slide;
    }
};

要调用此函数，我使用带参数的简单链接，具体取决于哪个幻灯片处于活动状态。

onclick="slideShow(slide2)"

然后我想用按键（向右）更改幻灯片。这是我的按键代码：

$(document).keydown(function(e) {
    if(e.keyCode == 39) {
        if ($currentSlide = $slide1){
            slideShow(slide2);
        } else if($currentSlide = $slide2) {
            slideShow(slide3);
        } else if($currentSlide = $slide3) {
            slideShow(slide1);
        }
     }
})

使用链接时效果很好，但是当我按下键时，它表现得非常奇怪。首次点击就像一个魅力，但它不再起作用。如果我点击获取第三张幻灯片，另一次点击会将下一张幻灯片放在slide3顶部，但slide3永远不会消失。

我意识到我这里有一些巨大的错误，但我太初衷了解它。有任何想法吗？

Answer 1

你的if-else条件将永远为真，因为你使用了'='而不是'=='。因为你的第一个条件是真的它总是显示slide2，它看起来它只工作了一次

$(document).keydown(function(e) {
    if(e.keyCode == 39) {
        if ($currentSlide == $slide1){
            slideShow(slide2);
        } else if($currentSlide == $slide2) {
            slideShow(slide3);
        } else if($currentSlide == $slide3) {
            slideShow(slide1);
        }
     }
})

第二个问题可能是由幻灯片上的时钟引起的，如果您使用的话。单击下一个/上一个按钮时，需要重置幻灯片的时钟。

Answer 2

有两个问题

您在if条件下执行任务，因此它们始终是真的。而是使用比较器===;
在onclick属性中指定了未定义的变量，因为缺少$

除了纠正这个问题之外，我建议您使用滑动元素的类，而不是单个ID。因此，在HTML中使用class="slide"代替id="slide1"，并将其应用于所有幻灯片 - 它们可以共享同一个类。

然后存储当前幻灯片的序列号，从0开始计算。

我还会删除幻灯片元素上的所有onclick属性，并处理代码中的点击处理程序，这可以通过$('.slide').click( ... )非常简洁地完成：

var currentSlideNo = 0; // zero-indexed

function slideShow(slideNo) {
    if(slideNo != currentSlideNo){
        $('.slide').get(currentSlideNo).fadeOut(500);
        currentSlideNo = slideNo;
        $('.slide').get(currentSlideNo).delay(500).fadeIn(500);
    }
};

$('.slide').click(function () {
    slideShow((currentSlideNo + 1) % $('.slide').length);
});

$(document).keydown(function(e) {
    if (e.keyCode == 39) {
        slideShow((currentSlideNo + 1) % $('.slide').length);
    }
});

Jquery keydown只能工作一次

2 个答案: