Question

我对此非常陌生。我找到了一些简单幻灯片的脚本。同一张海报提供了更多脚本来添加Previous＆amp;他脚本的下一步按钮。一切都很好，我喜欢它。但我想添加一个暂停按钮，在点击时停止幻灯片显示，再次单击时重新启动它。我对按钮更改的外观不感兴趣，只是希望功能切换。我创建了我的按钮并将其放置在我想要的位置，它在div中被称为“pauseButton”。我没有使用任何特定的“插件”，如“循环”，只是常规的jquery（我猜）。我花了4天时间在线寻找答案，虽然有些例子可能有用，但我不够聪明，不知道如何调整它以适应我的脚本。我只需要知道究竟要添加到这个（＆amp; where）以使其工作：

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
  var flag = true;
  $('.fadein img:gt(0)').hide();
  setInterval(function(){
  if(flag){ 
  $('.fadein :first-child').fadeOut()
    .next('img').fadeIn()
    .end().appendTo('.fadein');}, 
  3000);
 }
});
    $(function () {
        $('.fadein img:gt(0)').hide();
        $('.nextButton').on('click', function () {
            $('.fadein :first-child').fadeOut()
                .next('img').fadeIn()
                .end().appendTo('.fadein');
        });
        $('.previousButton').on('click', function () {
            $('.fadein :last-child').fadeIn()
                .insertBefore($('.fadein :first-child').fadeOut());
        });
    $('.pauseButton').click(function(){
         flag = !flag;   
        });
});
</script>

以下是整页：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thirteen Pine</title>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
  var flag = true;         
  $('.fadein img:gt(0)').hide();
  setInterval(function(){
  if(flag){                    
    $('.fadein :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.fadein');}, 
    3000);
  }
});
    $(function () {
        $('.fadein img:gt(0)').hide();
        $('.nextButton').on('click', function () {
            $('.fadein :first-child').fadeOut()
                .next('img').fadeIn()
                .end().appendTo('.fadein');
        });
        $('.previousButton').on('click', function () {
            $('.fadein :last-child').fadeIn()
                .insertBefore($('.fadein :first-child').fadeOut());
        });
         $('.pauseButton').click(function(){
             flag = !flag;
        });

});
</script>

<style type="text/css">
.fadein { position:relative; width:450px; height:275px; }
.fadein img { position:absolute; left:0; top:0; }

#showcontainer {
    width: 530px;
    height: 315px; }
#btn1 {
    float: left;
    width: 40px;
    height: 80px; }
#show {
    float: left;
    width: 450px;
    height: 275px; }
#btn2 {
    float: left;
    width: 40px;
    height: 80px; }
#btn3 {
    width: 80px;
    height: 30px; }

.nextButton, .previousButton, .pauseButton { cursor: pointer }

</style>
</head>
<body>
<div id="showcontainer">
  <div id="btn1"><img src="../images/btn_prev.png" width="40" height="80" vspace="100" class="previousButton"/></div>
    <div id="show" class="fadein">
         <img src="../gallery/slide/slide1.png" width="450" height="275" />
         <img src="../gallery/slide/slide2.png" width="450" height="275" />
         <img src="../gallery/slide/slide3.png" width="450" height="275" />
         <img src="../gallery/slide/slide4.png" width="450" height="275" />
         <img src="../gallery/slide/slide5.png" width="450" height="275" />
         <img src="../gallery/slide/slide6.png" width="450" height="275" /> 
         <img src="../gallery/slide/slide7.png" width="450" height="275" /> 
         <img src="../gallery/slide/slide8.png" width="450" height="275" />           
    </div>    
  <div id="btn2"><img src="../images/btn_next.png" width="40" height="80" vspace="100" class="nextButton"/></div><br />
  <div id="btn3"><img src="../images/btn_pause.png" width="80" height="30" class="pauseButton"/></div>  
</div>

Answer 1

你可以添加一个标志变量，只在setInterval回调中执行主代码，如果它是真的：

$(function(){
  var flag = true;
  $('.fadein img:gt(0)').hide();
  setInterval(function(){
  if(flag){
     $('.fadein :first-child').fadeOut()
       .next('img').fadeIn()
       .end().appendTo('.fadein');}, 
     3000);
  }
});

然后将点击处理程序绑定到切换标记的暂停按钮：

$('#my-button').click(function(){
    flag = !flag;
});

在我的图像幻灯片中添加切换暂停/播放功能

1 个答案: