自动播放全屏背景滑块答案

【问题标题】：Auto Play Full Screen Background Slider自动播放全屏背景滑块
【发布时间】：2013-03-06 14:55:24
【问题描述】：

我正在为网站使用全屏背景 jquery 滑块，默认情况下处于 Pause 状态。

我尝试过使用 jQuery，但对我来说不太奏效。

我还尝试使用触发方法通过在页面加载后单击“播放”按钮来覆盖当前的暂停状态

$(window).bind("load", function() {
  $('a#play, a.play').trigger('click');
});

但这也没有用...

我正在粘贴下面可能执行该操作的 jQuery 脚本

jQuery(document).ready(function($){

$('body').append('<span id="body_loader"></span>');
    $('#body_loader').fadeIn(); 

//In our jQuery function, we will first cache some element and define some variables:
var $bg             = $('#background'),
    $bg_img         = $bg.find('img'),
    $bg_img_eq      = $bg_img.eq(0),
    total           = $bg_img.length,
    current         = 0,
    $next       = $('#next'),
    $prev       = $('#prev')

$(window).load(function(){
    //hide loader
    $('#body_loader').fadeOut('fast', function(){
        init();
    }).remove(); 

});

var intervalID,
    play = $('#play'),
    titleItem = $('.title-item');   

//shows the first image and initializes events
function init(){
    //get dimentions for the image, based on the windows size
    var dim = getImageDim($bg_img_eq);
    //set the returned values and show the image
    $bg_img_eq.css({
        width   : dim.width,
        height  : dim.height,
        left    : dim.left,
        top    : dim.top
    }).fadeIn('normal');

    //resizing the window resizes the $tf_bg_img
    $(window).bind('resize',function(){
        var dim = getImageDim($bg_img_eq);
        $bg_img_eq.css({
            width   : dim.width,
            height  : dim.height,
            left    : dim.left,
            top     : dim.top
        });
    });

    var activeTitle = $bg_img_eq.attr('title');
        titleItem.html(activeTitle);
        titleItem.html(function(){
            var text= $(this).text().split(" ");
            var last = text.pop();
            return text.join(" ")+ (text.length > 0 ? " <span class='word-last'>"+ last + "</span>" : last);
        });

    play.bind('click', function() {
        if($(this).hasClass('pause')) {
            clearInterval(intervalID);
            $(this).removeClass('pause').addClass('play');
        } else {
            $(this).addClass('pause').removeClass('play');
            intervalID = setInterval("$('#next').trigger('click')", 10000);
        }

    });

    //click the arrow down, scrolls down
    $next.bind('click',function(){
        if($bg_img_eq.is(':animated'))
            return false;
            scroll('tb');
    });

    //click the arrow up, scrolls up
    $prev.bind('click',function(){
        if($bg_img_eq.is(':animated'))
        return false;
        scroll('bt');
    });
}

保存图片的div的class和id是background，播放按钮的class和id是play。

我正在处理的模板的链接http://xhtml.webtemplatemasters.com/style/dark/index.html#

【问题讨论】：

标签： jquery html background fullscreen

【解决方案1】：

作为替代方案，您也可以使用此插件。

http://buildinternet.com/project/supersized/

DEMO

【讨论】：

【解决方案2】：

将此添加到您的 general.js 文件中

play.trigger('click');

如果是 Wordpress 模板，那么

if(slide_autostart){ 
play.trigger('click'); 
}

【讨论】：