点一下这个播放按钮以后，可以开始处自动播放幻灯片，然后这个播放按钮，会变成一个暂停的按钮，点击这个暂停按钮，会停止播放幻灯片 ... 同时这个暂停按钮又会变成一个播放按钮。 下面，我们就去实现这个功能。

打开 app.js ...

先找到页面上的这个播放按钮 ... 在这个按钮上面，有一个叫 play-and-stop 的类 .. 用 jQuery 找到它 ... 然后再用一个 click 方法 ... 在这个播放暂停按钮上发生点击事件的时候，会调用这个方法 。

给这个方法一个函数作为它的参数 ...

$('.play-and-stop').click(
function() {}
)

我们可以先在它上面定义一个变量 ... 叫做 play ，用它来表示当前的幻灯片是播放还是暂停 ... 先让它的值等于 false ... 表示当前是暂停的状态 ...

再回到这个 click 方法里面的函数 ...

在这里，可以去判断一下 play 这个变量的值 ... 如果它的值是 true 的话 ... 点击这个按钮的时候就去开始播放幻灯片 ...

用一个 if ... 条件是 !play ，表示 play 的值相反的值，如果是 true 的话 ... 就去执行后面的花括号里面的代码 ...

要做的就是，先找到幻灯片 ... 然后使用 carousel 方法 ... 给它一个 cycle 参数 ... 这行代码可以开始循环播放幻灯片 ...

$('#slideshow').carousel('cycle');

另外，我们还要做一件事，就是把这个按钮下面的小图标，变成一个暂停的图标 ...

$(this).children('span').removeClass('glyphicon-play').addClass('glyphicon-pause');

把 this 交给 jQuery 方法 ... 这里的 this 表示的就是 play-and-stop 这个按钮元素 ... 然后再用一个 children 方法，找到它的子元素 ... 我们要找的是按钮里面的 span 标签 ...

再调用 removeClass 这个方法，去掉在这个 span 标签上面的小图标的类，这个类是 glyphicon-play，一个播放按钮样式的小图标 ... 去掉以后，在这个 span 元素上面，再添加一个暂停的小图标 ...

用一个 addClass 方法 ... 要添加的 css 类是 glyphicon-pause ...

执行完这些动作以后，可以再去修改一下 play 这个变量的值 .. 把它的值，设置成与当前的值相反的值，也就是如果它的值当前是 flase ，就让它等于 true ，如果是 true ，就让它等于 false ...

play = !play;

在这个 if 语句的后面，再用一个 else ，去设置一下别一种情况 ... 也就是，幻灯片正在播放的时候，点击这个按钮，要暂停播放，并且把按钮上面的小图标，变成一个播放的小图标 ...

$('#slideshow').carousel('pause');
$(this).children('span').removeClass('glyphicon-pause').addClass('glyphicon-play');

保存 ... 再回到浏览器 ... 刷新一下 ...

现在，我们设置的 play 这个变量的值会是默认的 false ..

点击这个播放按钮 ... 会让这个幻灯片自动开始循环的播放 ... 同时，也会把这个按钮的小图标变成一个暂停的图标 ... 接着又会把 play 这个变量设置成 true ...

现在， 我们可以再点一下这个按钮 ...

因为这个时候 play 的值已经是 ture 了 ... 点击这个按钮，会暂停播放幻灯片 .. 然后把按钮上面的小图标变成一个播放的图标 ... 把 play 的值又设置成了 false ...

这样，再点一下这个按钮 ... 又会开始循环播放幻灯片了 ...