Question

我在尝试使用此代码时遇到了一些问题，出于某些原因我似乎无法找到错误。如果有人知道我能做什么让它显示一个幻灯片大约3秒然后淡出并显示一个新的，最后回到第一个和循环，这将是伟大的！下面我发布了我现在的代码。我真的需要一些帮助，因为这个项目将在两周内完成，我还有很多工作要做，谢谢！

    <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 { }

注意：我无法使用插件，因为我正在努力创建自己的插件。谢谢！

这里也是一个JsFiddle：

http://jsfiddle.net/UYE4E/

Answer 1

您的函数声明不正确。您可能正在尝试执行以下操作：

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

无论如何，请阅读有关JS范围和闭包的内容。

Article 1 Article 2

Jquery内容滑块问题

1 个答案: