Question

我试图在我的flexslider演示文稿中添加一个playpause按钮。我想在html页面的其他地方添加一个单独的按钮，而不是标准的playpause按钮（在演示文稿中）。

不幸的是，我不是javascript的专家。我似乎无法弄清楚如何在我的页面上的其他地方制作一个元素（例如图像），就像播放暂停按钮一样。如何将它连接到正确的脚本？

如果这太难了，只需一个播放按钮也可以......因为当访问者点击下一个或上一个时，演示文稿会自动暂停。

希望有人能帮助我们！感谢

Answer 1

创建一个按钮，

<input type='button' value='START SLIDESHOW' id='play-gallery' />

然后为它编写js代码，

将代码放在flexslide的函数中，

$('.flexslider').flexslider({
   animation: "slide",
        controlNav: false,
        pausePlay: false,
        slideshowSpeed: 4000,
        slideToStart: 0,
   start: function(slider) {
       var slideshowPlaying = true;
        $('#play-gallery').click(function() {
                    if($('ul.slides li').length > 1) {
                        if (slideshowPlaying == true) {
                            slideshowPlaying = false;
                            slider.pause();
                            $('#play-gallery').html('START SLIDESHOW');
                        } else {
                            slideshowPlaying = true;
                            slider.flexAnimate(slider.getTarget("next"));
                            slider.play();
                            $('#play-gallery').html('STOP SLIDESHOW');
                        }
                    }
                });
   }
});

Answer 2

@HB Kautil +1为您的答案。但我不得不改变你的代码的两个部分。会添加这个作为评论，但我的“声誉”还没有。

$('#play-gallery').val('START SLIDESHOW');

和

$('#play-gallery').val('STOP SLIDESHOW');

除此之外你的答案完成了所有繁重的工作：）

在Flexslider中添加单独的playpause按钮

2 个答案: