暂停JavaScript滑块

时间：2016-05-04 19:10:18

标签： javascript

我写了一个脚本，每5秒更换一次图片。

var counter=1;
    window.setInterval(function slide() {
        var imgCount = $("#afisha img").length;
        for (i=1; i <= imgCount; i++) {
            var Image = document.getElementById(i);
            counter = counter + 1;
            if(counter > imgCount){counter=1;}
            Image.src="images/afisha/img" + counter + ".jpg";
        }
        if (counter==imgCount)
            counter=1;
        else
            counter = counter +1;
    },5000);

现在我想制作一个暂停按钮，当按下它时会停止图像改变。我如何实现这一目标？

这是HTML：

    <div id="afisha">
            <img src="images/afisha/img1.jpg" id="1"  />
            <img src="images/afisha/img2.jpg" id="2"  />
            <img src="images/afisha/img3.jpg" id="3" />
            <img src="images/afisha/img4.jpg" id="4"  />
            <img src="images/afisha/img5.jpg" id="5" />
            <img src="images/afisha/img6.jpg" id="6" />
            <img src="images/afisha/img7.jpg" id="7"   />
            <img src="images/afisha/img8.jpg" id="8"   />
            <img src="images/afisha/img9.jpg" id="9"  />

        <div class="navigation">
            <span class="previous" onclick="slideManuallyPrev()"></span>
            <span class="pause"></span>
            <span class="next" onclick="slideManuallyNext()"></span>
        </div>
    </div>

编辑： 我尝试过使用clearInterval（）方法，但它不起作用。我哪里出错了？：

var pauseCount = 1;
var timer=setInterval(slide,1000);

function pauseSlider() {
    if ((pauseCount % 2) == 1) {
        clearInterval(timer);
    }
    else {var timer=setInterval(slide,1000);}
    pauseCount++;
}

span。暂停onlick是pauseSlider（）。

更新：在其他情况下发现我的错误：var关键字。

4 个答案:

答案 0 :(得分：2)

最简单的方法是定义一个全局变量，比如var playing=true，在用户按下暂停时更改其值，然后在setTimeout的函数内检查playing是否为if(!playing) return;在继续之前为真（类似于var timer=setInterval(slide,5000);）。

其他方式可能是暂停计时器并在播放时再次设置（或再次暂停）。可以执行以下操作：

clearInterval(timer);

然后停止：

setInterval

然后使用前面的代码再次设置它。请注意，只是函数名称用作try { ArrayList<String> category = new ArrayList<String>(); for (int i=0; i<response.length();i++){ JSONObject obj = response.getJSONObject(i); category.add(obj.getString("name")); } ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(AddBookActivity.this, android.R.layout.simple_list_item_1, category); spCat.setAdapter.setAdapter(dataAdapter); }catch (Exception e){ e.printStackTrace(); } 的处理程序。

答案 1 :(得分：1)

您应该考虑将setInterval()函数的结果存储在变量中。这样您就可以在选择停止时调用clearInterval()函数：

$url = 'https://www.dublinairport.com/flight-information/live-departures';

$curl_handle=curl_init(); 
curl_setopt($curl_handle, CURLOPT_CAINFO, dirname(__FILE__)."/cacert.pem");
curl_setopt($curl_handle, CURLOPT_URL,$url);
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 0);
curl_setopt($curl_handle, CURLOPT_TIMEOUT, 2000);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);

$raw = curl_exec($curl_handle);
echo curl_error($curl_handle);

curl_close($curl_handle);

示例

您可以see a complete example that demonstrating starting and stopping here以及下面的示例：

enter image description here

答案 2 :(得分：0)

你可以像css3一样使用这个codepen {{3}} 

canvas.toSvg
$(document).ready(function() {
  var icon = $('.play');
  icon.click(function() {
     icon.toggleClass('active');
     return false;
  });
});
$background:#f9f9f9;
$foreground:#2c3e50;
$foreground-light:#34495e;
$size:25px;
$ratio:1.2;
$transition-time:0.3s;

body {
  text-align:center;
}

.play {
  display:block;
  width: 0; 
	height: 0; 
	border-top: $size solid transparent;
	border-bottom: $size solid transparent;
	border-left: ($size*$ratio) solid $foreground;
  margin: ($size * 2) auto $size auto;
  position:relative;
  z-index:1;
  transition: all $transition-time;
  -webkit-transition: all $transition-time;
  -moz-transition: all $transition-time;
  left:($size*0.2);
  
  &:before {
    content:'';
    position:absolute;
    top:($size*-1.5);
    left:($size*-2.3);
    bottom:($size*-1.5);
    right:($size*-0.7);
    border-radius:50%;
    border: ($size*0.2) solid $foreground;
    z-index:2;
    transition: all $transition-time;
    -webkit-transition: all $transition-time;
    -moz-transition: all $transition-time;
  }
  &:after {
    content:'';
    opacity:0;
    transition: opacity ($transition-time * 2);
    -webkit-transition: opacity ($transition-time * 2);
    -moz-transition: opacity ($transition-time * 2);
  }
  
  &:hover, &:focus {
    &:before {
       transform: scale(1.1);
       -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
    }
  }
  
  &.active {
	  border-color:transparent;
    &:after {
      content:'';
      opacity:1;
      width:($size);
      height:($size*1.6);
      background:$foreground;
      position:absolute;
      right: ($size*0.1);
      top: ($size*-0.8);
      border-left:($size*0.4) solid $foreground;
      box-shadow:inset ($size*0.6) 0 0 0 $background;
    }
  }
}

h1 {
   text-transform:uppercase;
  color:$foreground-light;
  letter-spacing:2px;
  font-size:2em;
  margin-bottom:0;
}

.headline {
   display:block;
  color:$foreground;
  font-size:1.5em;
  margin-bottom:1.5em;
}

答案 3 :(得分：0)

你可以像css3一样使用这个codepen http://codepen.io/mlegg10/pen/RaEpqq

编辑：下面插入的代码由于某种原因没有显示在此处，但适用于codepen链接 

$background:#f9f9f9;
$foreground:#2c3e50;
$foreground-light:#34495e;
$size:25px;
$ratio:1.2;
$transition-time:0.3s;

body {
  text-align:center;
}

.play {
  display:block;
  width: 0; 
	height: 0; 
	border-top: $size solid transparent;
	border-bottom: $size solid transparent;
	border-left: ($size*$ratio) solid $foreground;
  margin: ($size * 2) auto $size auto;
  position:relative;
  z-index:1;
  transition: all $transition-time;
  -webkit-transition: all $transition-time;
  -moz-transition: all $transition-time;
  left:($size*0.2);
  
  &:before {
    content:'';
    position:absolute;
    top:($size*-1.5);
    left:($size*-2.3);
    bottom:($size*-1.5);
    right:($size*-0.7);
    border-radius:50%;
    border: ($size*0.2) solid $foreground;
    z-index:2;
    transition: all $transition-time;
    -webkit-transition: all $transition-time;
    -moz-transition: all $transition-time;
  }
  &:after {
    content:'';
    opacity:0;
    transition: opacity ($transition-time * 2);
    -webkit-transition: opacity ($transition-time * 2);
    -moz-transition: opacity ($transition-time * 2);
  }
  
  &:hover, &:focus {
    &:before {
       transform: scale(1.1);
       -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
    }
  }
  
  &.active {
	  border-color:transparent;
    &:after {
      content:'';
      opacity:1;
      width:($size);
      height:($size*1.6);
      background:$foreground;
      position:absolute;
      right: ($size*0.1);
      top: ($size*-0.8);
      border-left:($size*0.4) solid $foreground;
      box-shadow:inset ($size*0.6) 0 0 0 $background;
    }
  }
}

h1 {
   text-transform:uppercase;
  color:$foreground-light;
  letter-spacing:2px;
  font-size:2em;
  margin-bottom:0;
}

.headline {
   display:block;
  color:$foreground;
  font-size:1.5em;
  margin-bottom:1.5em;
}
<a href="#" title="Play video" class="play"></a>
<h1>CSS3 Play/Pause button</h1>
<span class="headline">click/touch the button to see the animation.</span>
{{1}}

相关问题
最新问题