Question

我正在使用3D滑块在我的某个网站中显示滑块。我需要在其中应用播放/暂停功能。所以请告诉我如何加入其中。

这是HTML： -

<section id="dg-container" class="dg-container">
            <div class="dg-wrapper">
                <a href="#"><img src="images/1.jpg" alt="image01"><div>http://www.colazionedamichy.it/</div></a>
                <a href="#"><img src="images/2.jpg" alt="image02"><div>http://www.percivalclo.com/</div></a>
                <a href="#"><img src="images/3.jpg" alt="image03"><div>http://www.wanda.net/fr</div></a>
                <a href="#"><img src="images/4.jpg" alt="image04"><div>http://lifeingreenville.com/</div></a>
                <a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a>
                <a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a>
                <a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a>
                <a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/home</div></a>
                <a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a>
                <a href="#"><img src="images/10.jpg" alt="image10"><div>http://www.neighborhood-studio.com/</div></a>
                <a href="#"><img src="images/11.jpg" alt="image11"><div>http://www.beckindesign.com/</div></a>
                <a href="#"><img src="images/12.jpg" alt="image12"><div>http://kicksend.com/</div></a>
            </div>
            <nav>   
                <span class="dg-prev">&lt;</span>
                <span class="dg-pause">||</span>
                <span class="dg-next">&gt;</span>
            </nav>
        </section>

这是我正在使用的JS。

<script type="text/javascript">
    $(function() {
        $('#dg-container').gallery();
    });
</script/>

我正在关注this教程

Answer 1

检查文档后，可以添加自动播放和暂停功能。您将添加两个按钮播放和暂停

<button id="play" onclick="playFunction">Play</button>
<button id="pause" onclick="pauseFunction">Pause</button>

播放按钮将启动playFunction（）函数

playFunction(){
  $('#dg-container').gallery({autoplay:true});
}
pauseFunction(){
  $('#dg-container').gallery({autoplay:false});
}

修改

如果它不起作用，那么您可以以编程方式单击下一个按钮

<button id="play">Play</button> <button id="pause">Pause</button>

播放按钮将启动playFunction（）函数

setTimeout(function() { $(".dg-next").click(); }, 5000);

这将每隔5秒按下一次按钮。

Answer 2

要停止暂停自动播放，我们需要清除框架给出的超时，即：

clearTimeout($.data( $('#dg-container')[0], 'gallery' ).slideshow);

再次开始暂停的幻灯片调用_startSlideshow()

$.data( $('#dg-container')[0], 'gallery' )._startSlideshow();

Answer 3

在查看您所遵循的教程后，您会看到有一些可用的选项，例如自动播放，间隔等。我建议您制作播放和暂停按钮，并在这些功能的点击事件监听器中，将自动播放更改为true / false并重新初始化滑块。

点击播放按钮的功能

$('#dg-container').gallery({autoplay:true});

点击暂停按钮的功能

$('#dg-container').gallery({autoplay:false});

Answer 4

您好我认为以下代码将使您的工作更轻松。

     <button id="pause" onclick="pauseFunction()">
    </button>
<button id="play" onclick="playFunction()"></button>

并添加以下功能

    function pauseFunction(){
    $('#dg-container').gallery({autoplay:false});
  clearTimeout($.data( $('#dg-container')[0], 'gallery' ).slideshow);

}
function  playFunction(){
  $('#dg-container').gallery({autoplay:true});
    $.data( $('#dg-container')[0], 'gallery' )._startSlideshow();
}

我希望这有助于解决问题。

如何在此jquery 3d滑块中启用播放暂停功能

4 个答案:

修改