暂停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);

span.pause onlick是pauseSlider（）

---

更新：发现我的错误：

var

关键字处于else状态

最简单的方法是定义一个全局变量，比如说

var playing=true

，在用户按下pause时更改其值，然后在继续之前检查

setTimeout

函数中的

playing

是否为true（类似于

if（！playing）return；

）

另一种方法是在暂停时停止计时器，并在播放时再次设置（或再次暂停）。可以执行以下操作：

var定时器=设置间隔（幻灯片，5000）

然后停止它：

清除间隔（计时器）

然后用前面的代码再次设置。请注意，函数名称仅用作<代码> SETTIMECTOR> /COD>的处理程序。
 < P>您应该考虑将函数的结果存储在变量中。这将允许您在选择停止函数时调用该函数：

// Create your interval
var interval = window.setInterval(function slide() { ... }, 5000);

// Call this function when you want to stop it
function pause(){
    // Pause the interval
    clearInterval(interval);
}

示例

您可以在下面查看它的外观和示例：

您可以使用css3这样的代码笔来完成


$（文档）.ready（函数（）{
变量图标=$（'.play'）；
图标。单击（函数（）{
icon.toggleClass（'active'）；
返回false；
});
});
$background:#f9f9f9；
$前台：#2c3e50；
$前景光：#34495e；
$size:25px；
美元比率：1.2；
$transition time:0.3s；
身体{
文本对齐：居中；
}
.玩{
显示：块；
宽度：0；
身高：0；
边框顶部：$大小实心透明；
边框底部：$大小实心透明；
左边框：（$size*$ratio）实心$前景；
保证金：（$size*2）自动$size自动；
位置：相对位置；
z指数：1；
过渡：所有$transition时间；
-webkit转换：所有$transition时间；
-moz转换：所有$transition时间；
左：（$size*0.2）；
&：之前{
内容：''；
位置：绝对位置；
顶部：（$size*-1.5）；
左：（$size*-2.3）；
底部：（$size*-1.5）；
右图：（$size*-0.7）；
边界半径：50%；
边框：（$size*0.2）实心$前景；
z指数：2；
过渡：所有$transition时间；
-webkit转换：所有$transition时间；
-moz转换：所有$transition时间；
}
&：之后{
内容：''；
不透明度：0；
过渡：不透明度（$transitiontime*2）；
-webkit转换：不透明度（$transitiontime*2）；
-moz转换：不透明度（$transitiontime*2）；
}
&：悬停，&：聚焦{
&：之前{
转换：比例（1.1）；
-webkit转换：比例（1.1）；
-moz变换：比例（1.1）；
}
}
&.主动{
边框颜色：透明；
&：之后{
内容：''；
不透明度：1；
宽度：（$size）；
高度：（$size*1.6）；
背景：前景；
位置：绝对位置；
右：（$size*0.1）；
顶部：（$size*-0.8）；
左边框：（$size*0.4）实心$前景；
框阴影：插入（$size*0.6）0$背景；
}
}
}
h1{
文本转换：大写；
颜色：前景光；
字母间距：2px；
字号：2em；
页边距底部：0；
}
.标题{
显示：块；
颜色：前景；
字号：1.5em；
边缘底部：1.5em；
}

CSS3播放/暂停按钮
单击/触摸按钮以查看动画。
您可以使用css3这样的代码笔进行操作

编辑：由于某些原因，下面插入的代码不会显示在这里，但可以在codepen链接上工作
$（文档）.ready（函数（）{
变量图标=$（'.play'）；
图标。单击（函数（）{
icon.toggleClass（'active'）；
返回false；
});
});
$background:#f9f9f9；
$前台：#2c3e50；
$前景光：#34495e；
$size:25px；
美元比率：1.2；
$transition time:0.3s；
身体{
文本对齐：居中；
}
.玩{
显示：块；
宽度：0；
身高：0；
边框顶部：$大小实心透明；
边框底部：$大小实心透明；
左边框：（$size*$ratio）实心$前景；
保证金：（$size*2）自动$size自动；
位置：相对位置；
z指数：1；
过渡：所有$transition时间；
-webkit转换：所有$transition时间；
-moz转换：所有$transition时间；
左：（$size*0.2）；
&：之前{
内容：''；
位置：绝对位置；
顶部：（$size*-1.5）；
左：（$size*-2.3）；
底部：（$size*-1.5）；
右图：（$size*-0.7）；
边界半径：50%；
边框：（$size*0.2）实心$前景；
z指数：2；
过渡：所有$transition时间；
-webkit转换：所有$transition时间；
-moz转换：所有$transition时间；
}
&：之后{
内容：''；
不透明度：0；
过渡：不透明度（$transitiontime*2）；
-webkit转换：不透明度（$transitiontime*2）；
-moz转换：不透明度（$transitiontime*2）；
}
&：悬停，&：聚焦{
&：之前{
转换：比例（1.1）；
-webkit转换：比例（1.1）；
-moz变换：比例（1.1）；
}
}
&.主动{
边框颜色：透明；
&：之后{
内容：''；
不透明度：1；
宽度：（$size）；
高度：（$size*1.6）；
背景：前景；
位置：绝对位置；
右：（$size*0.1）；
顶部：（$size*-0.8）；
左边框：（$size*0.4）实心$前景；
框阴影：插入（$size*0.6）0$背景；
}
}
}
h1{
文本转换：大写；
颜色：前景光；
字母间距：2px；
字号：2em；
页边距底部：0；
}
.标题{
显示：块；
颜色：前景；
字号：1.5em；
边缘底部：1.5em；
}

CSS3播放/暂停按钮
单击/触按按钮可查看动画。
阅读关于等待。。。你在用你的图像做什么？交换每个图像
src
？似乎有点奇怪…我尝试使用clearInterval（）（请参见编辑），但不起作用。我哪里出错了？您应该从
}中删除
var
，否则{var timer=…
，因为这样您就定义了一个新的
timer
变量，而不是使用以前定义的全局
timer
。
var pauseCount = 1;
var timer=setInterval(slide,1000);

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

// Create your interval
var interval = window.setInterval(function slide() { ... }, 5000);

// Call this function when you want to stop it
function pause(){
    // Pause the interval
    clearInterval(interval);
}