JavaScript的Autostart函数

我仍然是JS的初学者，我的一个朋友也有问题。主页上有一个我想自动启动的滑块

我一直试图通过查看这个堆栈溢出链接来解决这个问题，但我使用的网站模板上的JS似乎有所不同

下面是我试图构建的网站的JavaScript

(function($) {
window.HomePageSlider = {

    currentSlide: 0,

    init: function() {
        this.container = $("#thb-home-slides");
        this.pictures = $(".thb-home-slide > img");

        this.header = $(".header-container");
        this.footer = $(".home-footer-container");

        this.captions = $(".thb-home-slide-caption");
        this.banners = $(".thb-banner");
        this.homeExpand = $(".thb-home-expand");
        this.controlNext = $(".thb-home-slides-next");
        this.controlPrev = $(".thb-home-slides-prev");
        this.pagerContainer = $(".thb-home-slides-pager");
        this.pager = $(".thb-home-slides-pager a");

        $("body").addClass("thb-loading");

        this.bindEvents();
        this.showHideControls();
        this.loadFrontImage();
    },

    positionElements: function() {
        var $w = $(window),
            header_height = $(".header-container").outerHeight() + ($("#wpadminbar").length ? 28 : 0),
            footer_height = $(".home-footer-container").outerHeight(),
            diff = parseInt( (footer_height - header_height) / 2, 10 );

        if( !footer_height ) {
            footer_height = 48;
        }

        HomePageSlider.captions.css({
            'top' : header_height,
            'bottom' : footer_height
        });

        if( $("html").hasClass("no-csstransforms") ) {
            HomePageSlider.banners.each(function() {
                $(this).css("margin-top", - ($(this).outerHeight() / 2) + diff );
            });
        }
        else {
            HomePageSlider.banners.each(function() {
                $(this).css("margin-top", diff );
            });
        }

        HomePageSlider.pagerContainer.css({
            bottom: footer_height
        });
    },

    loadFrontImage: function() {
        setTimeout(function() {
            if( ! HomePageSlider.pictures.length ) {
                HomePageSlider.container.addClass("thb-slider-loaded");
            }
            else {
                $.thb.loadImage( HomePageSlider.pictures, {
                    imageLoaded: function( image ) {
                        image.parent().thb_stretcher({
                            adapt: false
                        });

                        image.parent().addClass("thb-slide-loaded");
                        $("body").removeClass("thb-loading");

                        setTimeout(function() {
                            HomePageSlider.container.addClass("thb-slider-loaded");
                        }, 10);
                    }
                } );
            }
        }, 500);
    },

    bindEvents: function() {
        $.thb.key("right", function() {
            HomePageSlider.right();
        });

        $.thb.key("left", function() {
            HomePageSlider.left();
        });

        HomePageSlider.controlNext.click(function() {
            HomePageSlider.right();
            return false;
        });

        HomePageSlider.controlPrev.click(function() {
            HomePageSlider.left();
            return false;
        });

        HomePageSlider.homeExpand.click(function() {
            if( $("body").hasClass("w-home-expand") ) {
                $(this).attr("data-icon", "u");
                $("body").removeClass("w-home-expand");
            }
            else {
                $(this).attr("data-icon", "p");
                $("body").addClass("w-home-expand");
            }

            return false;
        });

        HomePageSlider.pager.click(function() {
            if( ! HomePageSlider.container.hasClass("thb-slider-loaded") || thb_moving ) {
                return false;
            }

            var target = $(this).data("target");

            HomePageSlider.pager.removeClass("active");
            $(this).addClass("active");

            if( target !== HomePageSlider.currentSlide ) {
                if( target > HomePageSlider.currentSlide ) {
                    for(i=HomePageSlider.currentSlide; i<target; i++) {
                        HomePageSlider.right(true);
                    }
                }
                else {
                    for(i=HomePageSlider.currentSlide; i>target; i--) {
                        HomePageSlider.left(true);
                    }
                }
            }

            return false;
        });

        $('body.thb-mobile').hammer().bind('swipeleft', function() {
            HomePageSlider.right();
            return false;
        });

        $('body.thb-mobile').hammer().bind('swiperight', function() {
            HomePageSlider.left();
            return false;
        });
    },

    right: function( programmatic ) {
        if( ! programmatic && (! HomePageSlider.container.hasClass("thb-slider-loaded") || thb_moving) ) {
            return false;
        }

        var active_slides = $(".thb-home-slide.active"),
            slides = $(".thb-home-slide"),
            last_active = active_slides.last();

        if( active_slides.length < slides.length ) {
            $.thb.transition(last_active, function() {
                thb_moving = false;
            });

            last_active.addClass("out");
            last_active.next().addClass("active");

            this.currentSlide++;
            thb_moving = true;
        }
        else {
            thb_moving = true;

            $("#thb-home-slides").stop().animate({
                "margin-left": -20
            }, 150, 'linear', function() {
                $(this).stop().animate({
                    "margin-left": 0
                }, 500, 'easeOutElastic', function() {
                    thb_moving = false;
                });
            });
        }

        this.showHideControls();
    },

    left: function( programmatic ) {
        if( ! programmatic && (! HomePageSlider.container.hasClass("thb-slider-loaded") || thb_moving) ) {
            return false;
        }

        var active_slides = $(".thb-home-slide.active"),
            last_active = active_slides.last();

        if( active_slides.length > 1 ) {
            $.thb.transition(last_active, function() {
                thb_moving = false;
            });

            last_active.prev().removeClass("out");
            last_active.removeClass("active");

            this.currentSlide--;
            thb_moving = true;
        }
        else {
            thb_moving = true;

            $("#thb-home-slides").stop().animate({
                "margin-left": 20
            }, 150, 'linear', function() {
                $(this).stop().animate({
                    "margin-left": 0
                }, 500, 'easeOutElastic', function() {
                    thb_moving = false;
                });
            });
        }

        this.showHideControls();
    },

    showHideControls: function() {
        var active_slides = $(".thb-home-slide.active"),
            slides = $(".thb-home-slide");

        HomePageSlider.controlPrev.css({'visibility': 'visible'});
        HomePageSlider.controlNext.css({'visibility': 'visible'});

        if( active_slides.length === 1 ) {
            HomePageSlider.controlPrev.css({'visibility': 'hidden'});
        }

        if( active_slides.length === slides.length ) {
            HomePageSlider.controlNext.css({'visibility': 'hidden'});
        }

        HomePageSlider.pager.removeClass("active");
        HomePageSlider.pager.eq(active_slides.last().index()).addClass("active");
    }
};

---

您可能可以使用以下任何一种方法，尽管我推荐后者

1立即调用函数表达式

(function($) {     

    // function stuff

})(jQuery);

2 jQuery文档就绪：

$(document).ready(function() {

    // function stuff

});

---

这里//函数内容是window.HomePageSlider={…}

使用您链接的问题作为参考，我们可以复制自动播放函数并在init上调用它

(function($) {
window.HomePageSlider = {

currentSlide: 0,
timer: null,

init: function() {
    this.container = $("#thb-home-slides");
    this.pictures = $(".thb-home-slide > img");

    this.header = $(".header-container");
    this.footer = $(".home-footer-container");

    this.captions = $(".thb-home-slide-caption");
    this.banners = $(".thb-banner");
    this.homeExpand = $(".thb-home-expand");
    this.controlNext = $(".thb-home-slides-next");
    this.controlPrev = $(".thb-home-slides-prev");
    this.pagerContainer = $(".thb-home-slides-pager");
    this.pager = $(".thb-home-slides-pager a");

    $("body").addClass("thb-loading");

    this.bindEvents();
    this.showHideControls();
    this.loadFrontImage();
    this.autoPlay();
},

positionElements: function() {
    var $w = $(window),
        header_height = $(".header-container").outerHeight() + ($("#wpadminbar").length ? 28 : 0),
        footer_height = $(".home-footer-container").outerHeight(),
        diff = parseInt( (footer_height - header_height) / 2, 10 );

    if( !footer_height ) {
        footer_height = 48;
    }

    HomePageSlider.captions.css({
        'top' : header_height,
        'bottom' : footer_height
    });

    if( $("html").hasClass("no-csstransforms") ) {
        HomePageSlider.banners.each(function() {
            $(this).css("margin-top", - ($(this).outerHeight() / 2) + diff );
        });
    }
    else {
        HomePageSlider.banners.each(function() {
            $(this).css("margin-top", diff );
        });
    }

    HomePageSlider.pagerContainer.css({
        bottom: footer_height
    });
},

loadFrontImage: function() {
    setTimeout(function() {
        if( ! HomePageSlider.pictures.length ) {
            HomePageSlider.container.addClass("thb-slider-loaded");
        }
        else {
            $.thb.loadImage( HomePageSlider.pictures, {
                imageLoaded: function( image ) {
                    image.parent().thb_stretcher({
                        adapt: false
                    });

                    image.parent().addClass("thb-slide-loaded");
                    $("body").removeClass("thb-loading");

                    setTimeout(function() {
                        HomePageSlider.container.addClass("thb-slider-loaded");
                    }, 10);
                }
            } );
        }
    }, 500);
},

bindEvents: function() {
    $.thb.key("right", function() {
        HomePageSlider.right();
    });

    $.thb.key("left", function() {
        HomePageSlider.left();
    });

    HomePageSlider.controlNext.click(function() {
        HomePageSlider.right();
        return false;
    });

    HomePageSlider.controlPrev.click(function() {
        HomePageSlider.left();
        return false;
    });

    HomePageSlider.homeExpand.click(function() {
        if( $("body").hasClass("w-home-expand") ) {
            $(this).attr("data-icon", "u");
            $("body").removeClass("w-home-expand");
        }
        else {
            $(this).attr("data-icon", "p");
            $("body").addClass("w-home-expand");
        }

        return false;
    });

    HomePageSlider.pager.click(function() {
        if( ! HomePageSlider.container.hasClass("thb-slider-loaded") || thb_moving ) {
            return false;
        }

        var target = $(this).data("target");

        HomePageSlider.pager.removeClass("active");
        $(this).addClass("active");

        if( target !== HomePageSlider.currentSlide ) {
            if( target > HomePageSlider.currentSlide ) {
                for(i=HomePageSlider.currentSlide; i<target; i++) {
                    HomePageSlider.right(true);
                }
            }
            else {
                for(i=HomePageSlider.currentSlide; i>target; i--) {
                    HomePageSlider.left(true);
                }
            }
        }

        return false;
    });

    $('body.thb-mobile').hammer().bind('swipeleft', function() {
        HomePageSlider.right();
        return false;
    });

    $('body.thb-mobile').hammer().bind('swiperight', function() {
        HomePageSlider.left();
        return false;
    });
},

right: function( programmatic ) {
    if( ! programmatic && (! HomePageSlider.container.hasClass("thb-slider-loaded") || thb_moving) ) {
        return false;
    }

    var active_slides = $(".thb-home-slide.active"),
        slides = $(".thb-home-slide"),
        last_active = active_slides.last();

    if( active_slides.length < slides.length ) {
        $.thb.transition(last_active, function() {
            thb_moving = false;
        });

        last_active.addClass("out");
        last_active.next().addClass("active");

        this.currentSlide++;
        thb_moving = true;
    }
    else {
        thb_moving = true;

        $("#thb-home-slides").stop().animate({
            "margin-left": -20
        }, 150, 'linear', function() {
            $(this).stop().animate({
                "margin-left": 0
            }, 500, 'easeOutElastic', function() {
                thb_moving = false;
            });
        });
    }

    this.showHideControls();
},

left: function( programmatic ) {
    if( ! programmatic && (! HomePageSlider.container.hasClass("thb-slider-loaded") || thb_moving) ) {
        return false;
    }

    var active_slides = $(".thb-home-slide.active"),
        last_active = active_slides.last();

    if( active_slides.length > 1 ) {
        $.thb.transition(last_active, function() {
            thb_moving = false;
        });

        last_active.prev().removeClass("out");
        last_active.removeClass("active");

        this.currentSlide--;
        thb_moving = true;
    }
    else {
        thb_moving = true;

        $("#thb-home-slides").stop().animate({
            "margin-left": 20
        }, 150, 'linear', function() {
            $(this).stop().animate({
                "margin-left": 0
            }, 500, 'easeOutElastic', function() {
                thb_moving = false;
            });
        });
    }

    this.showHideControls();
},

showHideControls: function() {
    var active_slides = $(".thb-home-slide.active"),
        slides = $(".thb-home-slide");

    HomePageSlider.controlPrev.css({'visibility': 'visible'});
    HomePageSlider.controlNext.css({'visibility': 'visible'});

    if( active_slides.length === 1 ) {
        HomePageSlider.controlPrev.css({'visibility': 'hidden'});
    }

    if( active_slides.length === slides.length ) {
        HomePageSlider.controlNext.css({'visibility': 'hidden'});
    }

    HomePageSlider.pager.removeClass("active");
    HomePageSlider.pager.eq(active_slides.last().index()).addClass("active");
},

autoPlay: function()
{ 
    clearTimeout(this.timer);
    //auto play
    this.timer = setTimeout(function () {
        HomePageSlider.right();
    }, 2500)
}
};

---

只需围绕要自动启动的函数进行包装。另外，将所有脚本放在结尾，就在结束“body”元素之前

    (function autorun()
    { 

        yourFunction(); // autostart this one

    })();

---

听起来你需要这个：谢谢你的编辑@jgillich。我是新来发帖的。注意。。。您可以在dom就绪之外定义window.homePageSlider，无需等待定义它。“你只需要等一下就可以开始了。”亚历克斯梅尔我想你可能误解了这个问题。当我使用$document.readyfunction{//function stuff}时，TrueT20希望幻灯片在加载时自动循环；建议滑块根本没有出现。是的。。。很抱歉我没有描述。我希望幻灯片在加载时自动循环。我做了您建议的更改。他们住在现场，但仍然不工作。我所看到的唯一区别是导航按钮位于顶部，这没什么大不了的，因为我可能会将它们隐藏起来，并且我无法再导航到下一张幻灯片。在新函数中，对计时器的引用可能需要在此之前进行一次输入。我会更新答案的。更改是实时的。您将看到它是有效的，但只会更改幻灯片一次。我希望它能在所有的幻灯片中不断循环。如果你想找一个旋转木马，可能更容易删掉现有的，并替换成这样的东西：我在许多网站上使用过它，效果很好