全屏背景幻灯片的播放/暂停按钮

发布于 11-10 11:26 字数 882 浏览 3 评论 0原文

我正在学习 jquery,但还没有达到可以添加自己的 JavaScript 的阶段。我在互联网上搜索了一种在全屏背景幻灯片中添加播放/暂停按钮的方法。下面是幻灯片放映的 JavaScript。

干杯!

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
//var $next =  $active.next().length ? $active.next()
    //: $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

var $sibs  = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 0.87}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

I'm learning my way around jquery but I am not yet at the stage where I can add my own JavaScript. I have searched all over the internet for a way to add a play/pause button to my full-screen background-slideshow. Below is the JavaScript for the slideshow.

Cheers!

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
//var $next =  $active.next().length ? $active.next()
    //: $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

var $sibs  = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 0.87}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

水波映月2024-11-17 11:26:56

我会在 #slideshow HTML 中添加一个按钮,前置或附加都没关系(假设您从播放幻灯片开始)

<a class="pause" href="#">Pause</a>

然后将以下内容放入 CSS 中:

#slideshow {
    position: relative;
}
#slideshow a {
    position: absolute;
    top: ##px;
    left: ##px;
    display: none;
    width: ##px;
    height: ##px;
}
#slideshow:hover a {
    display: block;
}
a.pause {
    background-image: url('/path/to/pause.png');
}
a.play {
    background-image: url('/path/to/play.png');
}

对于结局,只需使用以下 javascript 并将其配置为一点:
//额外
变量t;
//endADDED

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
//var $next =  $active.next().length ? $active.next()
//: $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

var $sibs  = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next  = $( $sibs[ rndNum ] );

$active.addClass('last-active');

$next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 0.87}, 1000, function() {
        $active.removeClass('active last-active');
    });
}
//ADDED
//@TODO: this doesn't really account for the possibility that the slideshow wouldn't be playing on page load, it may be better to bind seperate events to .pause and .play, but in general, I think toggle may be more effective.  Another option would be to use click() and just throw in an if statement.
$('#slideshow').find('a').toggle(
    function() {
        $(this).attr('class', 'play');
        t = window.clearInterval(t);
    },
    function() {
        $(this).attr('class', 'pause');
        t = setInterval( "slideSwitch()", 5000 );
    }
);
//endADDED

$(function() {
     t = setInterval( "slideSwitch()", 5000 );
});

如果写得有点快,我深表歉意,我可能会做一些稍微不同的事情,但想让它与您以前的代码一起工作,而不是仅仅给您一些完全不同的东西而不做任何解释。如果你愿意,我可以在今晚晚些时候找到我以前做过的一张幻灯片,并将你链接到它的jsfiddle或要点,我只是现在没有时间。如果这不起作用,它可能与 (set|clear)Interval 恶作剧有关(说实话,我一直只是使用 (set|clear)Timeout(); )

希望它有帮助!

I would add a button to the #slideshow HTML, prepended or appended wouldn't matter (this assumes you start with the slideshow playing)

<a class="pause" href="#">Pause</a>

Then put the following in your CSS:

#slideshow {
    position: relative;
}
#slideshow a {
    position: absolute;
    top: ##px;
    left: ##px;
    display: none;
    width: ##px;
    height: ##px;
}
#slideshow:hover a {
    display: block;
}
a.pause {
    background-image: url('/path/to/pause.png');
}
a.play {
    background-image: url('/path/to/play.png');
}

And for the finale, just use the following javascript and configure it a little bit:
//ADDED
var t;
//endADDED

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
//var $next =  $active.next().length ? $active.next()
//: $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

var $sibs  = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next  = $( $sibs[ rndNum ] );

$active.addClass('last-active');

$next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 0.87}, 1000, function() {
        $active.removeClass('active last-active');
    });
}
//ADDED
//@TODO: this doesn't really account for the possibility that the slideshow wouldn't be playing on page load, it may be better to bind seperate events to .pause and .play, but in general, I think toggle may be more effective.  Another option would be to use click() and just throw in an if statement.
$('#slideshow').find('a').toggle(
    function() {
        $(this).attr('class', 'play');
        t = window.clearInterval(t);
    },
    function() {
        $(this).attr('class', 'pause');
        t = setInterval( "slideSwitch()", 5000 );
    }
);
//endADDED

$(function() {
     t = setInterval( "slideSwitch()", 5000 );
});

I apologize if it's a little quickly written, I probably would've done a few things a little different, but wanted to make it work w/ your previous code instead of just handing you something completely different with no explanation. If you want, I can find one of my slideshows later this evening that I've done before, and link you to a jsfiddle or gist of it, I just don't have time at the moment. If this doesn't work, it probably has something to do w/ the (set|clear)Interval shenanigans (to be honest, I've always just used (set|clear)Timeout(); )

Hope it helps!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文