JavaScript的自动启动功能

时间：2014-07-07 18:16:51

标签： javascript jquery

我还是JS的初学者，我的一个sites遇到了麻烦。主页有一个我想自动启动的滑块。

我一直试图通过查看此Stack Overflow链接（Autostart jQuery slider）来解决问题，但我使用的网站模板上的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");
    }
};

3 个答案:

答案 0 :(得分：0)

使用您链接的问题作为参考，我们可以复制autoPlay函数并在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)
}
};

答案 1 :(得分：0)

只需将其包裹在您想要自动启动的功能中。此外，将所有脚本放在最后，就在结束之前，＃body;＆＃39;元件。

    (function autorun()
    { 

        yourFunction(); // autostart this one

    })();

答案 2 :(得分：-1)

您可以使用以下任一方法，但我建议使用后者。

1）立即调用函数表达式

(function($) {     

    // function stuff

})(jQuery);

2）jQuery文档就绪：

$(document).ready(function() {

    // function stuff

});

此处// function stuff为window.HomePageSlider = { ... }

相关问题
最新问题