问题描述:

So, I had need of a very, very simple image slider. Instead of wrestling with a far too capable plugin, I thought I'd just write one.

I've put it into a fiddle here

There is a container div 620px wide, and the internal div is 1240px wide. Thus only half of it is in view at any one time, and I just animate the left attribute of the internal div. Foo moves it to the first slide, and Bar Humbug moves it to the second one. This works fine.

So, I was asked to add a timer in. So, every five seconds it should go to the other slide, whichever that one is. If you move to the other slide manually, it waits a bit longer before moving by itself again. Being a general programming n00b, I tried to do this with ifs and variables, which seemed to make sense to me.

However, something in here doesn't work. It happily moves to the second slide, but will never move back by itself. I'm assuming this is something to do with the variables not being read within the various functions, but they do get changed, and the console.logs do report the correct number. So perhaps the ifs aren't reading the variables. Frankly, I'm a little lost as to where to move from here. Any help would be greatly appreciated. Thank you.

I've added the code below incase the fiddle doesn't work for someone, or incase you prefer to have it inline here.

Here's the 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);

});

Here's the 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>

Here's the relevant 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;

}

网友答案:

In your variable declarations up top, start out with timerOn = 1, then change all of your if statements to use double equal signs instead of singles.

That seemed to work on the fiddle.

网友答案:

Off a quick look, I would say your problem is that variable which aren't global in scope are being accessed in functions. For example, the slideNumber variable is actually local to the function you are passing to $(document).ready(); You need those variables declared outside of the scope of that function to be accessible elsewhere.

Additionally, you don't want to define your functions inside the $(document).ready() function. See my revised version below.

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);


});
相关阅读:
Top