Переменные в моем простом слайдере jQuery не работают должным образом. Может ли кто-нибудь взглянуть? - PullRequest
Новая
       6

Переменные в моем простом слайдере jQuery не работают должным образом. Может ли кто-нибудь взглянуть?

0 голосов
/ 29 апреля 2011

Итак, мне нужен очень, очень простой слайдер изображений.Вместо того, чтобы бороться со слишком мощным плагином, я подумал, что просто напишу один.

Я положил его в скрипку здесь

Есть контейнерШирина div 620 пикселей, а ширина внутреннего div 1240 пикселей.Таким образом, только половина из них видна одновременно, и я просто оживляю левый атрибут внутреннего div.Foo перемещает его на первый слайд, а Bar Humbug перемещает его на второй.Это отлично работает.

Итак, меня попросили добавить таймер. Итак, каждые пять секунд он должен переходить на другой слайд, какой бы он ни был.Если вы переходите к другому слайду вручную, он ждет немного дольше, прежде чем снова перемещаться сам.Будучи общим программистом n00b, я пытался сделать это с if s и переменными, что мне показалось логичным.

Однако что-то здесь не работает.Он счастливо перемещается ко второму слайду, но никогда не вернется сам по себе.Я предполагаю, что это как-то связано с тем, что переменные не читаются внутри различных функций, но они меняются, и 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;
}

Ответы [ 2 ]

1 голос
/ 29 апреля 2011

В объявлениях переменных вверху начните с timerOn = 1, затем измените все ваши операторы if, чтобы использовать двойные знаки равенства вместо одиночных.

Это, похоже, сработало на скрипке.

0 голосов
/ 29 апреля 2011

Вкратце, я бы сказал, что ваша проблема в том, что переменные, не являющиеся глобальными по объему, доступны в функциях. Например, переменная 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);


});
...