Question

I am having a bit of a problem trying to get this code to work, for some reason I just can’t seem to find what is wrong. If anybody knows what I can do to make it show a slide for about 3 sec then fade out and show a new one and at the end go back to the first and loop that would be great! Below I have posted the code I have right now. I really need some help as this project is due in 2 weeks and I have a lot more work to do, thanks!

    <section class="clearfix">
    <div id="snapshots">
        <article>
            <img src="http://static.tumblr.com/dbek3sy/4mem1qr1m/themes_image.png">
        </article>
        <article>
            <img src="http://static.tumblr.com/dbek3sy/q8Em247a0/slidehome_4.png">
        </article>
        <article>
            <img src="http://static.tumblr.com/dbek3sy/dsLm2trr5/slidehome_5.png">
        </article>
    </div>
    </section>​


    /* joey content slider function */
    window.onload = function() { 

    var time = 1500;
    var content = $('#snapshots');
    var cont = 1;


    // MARK THE ARTICLES AND CONTENT
    $(function article(){

    // how many slides 
    // an = article number
    var an = content.find("article").length;

    // define the amount of slides in a class name 
    // example: <div class="slides_6">
    content.addClass("slides_"+an);

    // slide switcher 
    content.append('<div id="switch"></div>');

    };




// FIND AND MARK SLIDES
$(function slides() {
    numb = 1;
    content.find("article").each(function(){
        $(this).addClass("slide_"+numb);
        numb++;
        $(this).hide();
    });

    //setTimeout("", 4000);
}


function slider(content, time){
    content.fadeOut(time, function() {

    // plus 1 slide 
    var conta = cont+1;

    $("article.slide_"+conta).animate({
        "display": "block"
    },1500);

    $("article.slide_"+cont).animate({
        "display": "none"
    },1500);

    setTimeout("doitdude()", 4000);

    });

}


// RESET SLIDE
function reset(content, time) {

    // fade out content 
    content.fadeOut(time, function(){

    // while fading out 

    // show first slide 
    $("article.slide_1").animate({
        "display": "block"
    },1500);
     // hide the last one 
    $("article.slide_"+conta).animate({
        "display": "none"
    },1500);

    // end transition
    });


    setTimeout("doitdude()", 4000);
}


function doitdude() {
    if(cont < an) {
        slider(content, 1000);
        cont++;
    }
    else{
        var conta = cont;
        var cont = 1;
        // reset code here:
        reset()
    }


};​


    #snapshots { overflow: hidden; height: 410px; width: auto; }
    #snapshots img { }​

Note: I can’t use a plugin because I am trying to make my own. Thanks!

Also a JsFiddle here:

http://jsfiddle.net/UYE4E/

Answer 1

Your function declaration is incorrect. Probably you are trying to do following:

(function($) {
    function foo(){
        //foo body
    };
}(jQuery) );

Anyway, read about JS scopes and closures.

Article 1 Article 2