我的简单 jQuery 滑块中的变量未按预期工作。有人可以看一下吗？

Question

所以，我需要一个非常非常简单的图像滑块。我认为我应该编写一个，而不是与一个功能太强大的插件搏斗。

我把它放入 fiddle here

有一个容器 div 620px 宽，内部 div 是1240 像素宽。因此，任何时候都只有一半可见，我只是为内部 div 的 left 属性设置动画。 Foo 将其移动到第一张幻灯片，Bar Humbug 将其移动到第二张幻灯片。这很好用。

因此，我被要求添加一个计时器。因此，每五秒它应该转到另一张幻灯片，无论是哪一张。如果您手动移动到另一张幻灯片，它会等待一段时间才能再次自行移动。作为一名普通编程新手，我尝试使用 if 和变量来做到这一点，这对我来说似乎很有意义。

然而，这里有些东西不起作用。它很高兴地移动到第二张幻灯片，但永远不会自行返回。我假设这与在各种函数中未读取变量有关，但它们确实发生了变化，并且 console.logs 确实报告了正确的数字。所以也许 if 没有读取变量。坦白说，我有点不知道该从这里搬到哪里。任何帮助将不胜感激。谢谢。

我添加了下面的代码，以防小提琴对某人不起作用，或者如果您更喜欢将其内联在此处。

这是 javascript

$(document).ready(function() {

    var speed = 5000;
    var timerOn = 0;
    var slideNumber = 1;
    console.log(slideNumber)

    function slideTimer() 
    { 

        if (timerOn = 1) {

            if (slideNumber=1) {
                goToSlide2();
                console.log(slideNumber)
            }

            else if (slideNumber=2) {
                goToSlide1();
                console.log(slideNumber)
            }

        };

    }

    function goToSlide2()
    {
        $('#slider_arrow').animate({left: '375px'}, 400);
        $('#slider_content').animate({left: '-620px'}, 400, function(){
            slideNumber=2;
            window.setTimeout(function()
            {
                timerOn = 1;
            }, speed);
        });
    }

    function goToSlide1()
    {
        $('#slider_arrow').animate({left: '75px'}, 400);
        $('#slider_content').animate({left: '0px'}, 400, function(){
            slideNumber=1;
            window.setTimeout(function()
            {
                timerOn = 1;
            }, speed);
        });
    }    


    $('#isr_title span.slider_button.foo').click(function() {
        timerOn = 0;
        goToSlide1();
    });

    $('#isr_title span.slider_button.bar_humbug').click(function() {
        timerOn = 0;
        goToSlide2();
    });

    window.setInterval(
        function()
        {
        slideTimer();
        }, 4000);


});

这是 HTML

<div id="main" role="main" class="clearfix">
    <div id="branding_section_buttons">
        <h1 id="isr_title"><span class="slider_button foo">Foo</span> <span class="slider_button bar_humbug"> Bar Humbug</span></h1>
        <div id="slider_arrow" class="target_independent">
        </div>
    </div> 

<div id="slider">
                <div id="slider_content" class="clearfix">
                    <p>Our <span class="highlight">lorem</span> ipsum lorem ipsum lorem ipsum lorem ipsum <span class="highlight">lorem</span> ipsum <span class="highlight">lorem</span> ipsum.</p>
                    <img src="http://placekitten.com/280/200" alt="" width="280" height="200">
                    <p style="color: red;">Our <span class="highlight">lorem</span> ipsum lorem ipsum lorem ipsum lorem ipsum <span class="highlight">lorem</span> ipsum <span class="highlight">lorem</span> ipsum.</p>
                    <img src="http://placekitten.com/280/200" alt="" width="280" height="200">
                </div>
        </div>

这是相关的 CSS

#slider
{
    position: relative;
    width: 600px;
    margin-bottom: 20px;
    margin-right: 20px;
    overflow:hidden;
    height: 200px;
}

#slider_content
{
    width: 1240px;
    position: absolute;

}

#slider_content p, #slider_content img
{
    float: left;
    width: 300px;
}

#slider_content p
{
    font-size:182%;
    line-height: 1.2;
    font-weight: 300;
}

#slider_content p span.highlight
{
    font-weight: 700;
    color: #445daa;
}

#slider_content img
{
    margin-right: 20px;
}

#slider_content
{
    width: 1240px;
    position: absolute;

}

#slider_content p, #slider_content img
{
    float: left;
    width: 300px;
}

#slider_content p
{
    font-size:182%;
    line-height: 1.2;
    font-weight: 300;
}

#slider_content p span.highlight
{
    font-weight: 700;
    color: #445daa;
}

#slider_content img
{
    margin-right: 20px;
}

Answer 1

在顶部的变量声明中，从timerOn = 1开始，然后更改所有if语句以使用双等号而不是单等号。

这似乎对小提琴有用。

Answer 2

快速浏览一下，我想说你的问题是在函数中访问非全局范围的变量。例如，slideNumber 变量实际上是您传递给 $(document).ready(); 的函数的本地变量。您需要在该函数范围之外声明的那些变量才能在其他地方访问。

此外，您不想在 $(document).ready() 函数内定义函数。请参阅下面我的修订版本。

var speed = 5000;
var timerOn = 0;
var slideNumber = 1;

function slideTimer() 
    { 

        if (timerOn = 1) {

            if (slideNumber=1) {
                goToSlide2();
                console.log(slideNumber)
            }

            else if (slideNumber=2) {
                goToSlide1();
                console.log(slideNumber)
            }

        };

    }

    function goToSlide2()
    {
        $('#slider_arrow').animate({left: '375px'}, 400);
        $('#slider_content').animate({left: '-620px'}, 400, function(){
            slideNumber=2;
            window.setTimeout(function()
            {
                timerOn = 1;
            }, speed);
        });
    }

    function goToSlide1()
    {
        $('#slider_arrow').animate({left: '75px'}, 400);
        $('#slider_content').animate({left: '0px'}, 400, function(){
            slideNumber=1;
            window.setTimeout(function()
            {
                timerOn = 1;
            }, speed);
        });
    }

$(document).ready(function() {
    console.log(slideNumber);

    $('#isr_title span.slider_button.foo').click(function() {
        timerOn = 0;
        goToSlide1();
    });

    $('#isr_title span.slider_button.bar_humbug').click(function() {
        timerOn = 0;
        goToSlide2();
    });

    window.setInterval(
        function()
        {
        slideTimer();
        }, 4000);


});