下面， 我们去给这个按钮添加点真正的功能。先去创建一个目录 ... 命名为 js ... 在这个目录里面，再新建一个文件 ... 叫它 app.js ...

回到 index.html ... 在这个页面上，把 app.js 嵌入进来 ...

然后再打开 app.js .... 我们可以把代码放在页面加载以后立即执行的函数里面 ...

$(function() {})

下面要做的是，去监听控制幻灯片的按钮上面的点击事件 ... 当点了这些按钮以后，去执行指定的动作 ...

先找到向左播放幻灯片的按钮 ... 在这个按钮上，我们已经添加了一个叫 prev-slide 的类 .. 可以用它来定位这个按钮 ... 再用 jQuery 的 on 或者直接使用 click 方法，去监听点击的事件 ...

这里我们使用 on 这个方法 ... 指定一下要监听的事件的名字 ... click ，点击的事件 ... 再去设置一下发生这个事件要执行的函数 ... 可以使用一个现有的函数的名字，或者，也可以直接用一个匿名函数 ... 这里我们直接使用一个匿名函数 ...

在 prev-slide 这个按钮上，发生点击事件以后，要做的事就是 .... 先找到幻灯片 ... 在幻灯片的包装元素上面，我们已经定义好一个叫 slideshow 的 id ，可以使用这个 id 定位到幻灯片 ...

找到以后，去调用 Bootstrap 的 carousel 组件的 carousel 这个方法 ... 给这个方法一个 prev 参数 ... 它的功能就是向左播放一张幻灯片 ...

$('.prev-slide').on('click', function() {
$('#slideshow').carousel('prev');
});

我们可以去试一下 ... 点击这个向左的按钮 ... 你会发现，可以播放前面这张幻灯片 ...

其它的按钮，还不起作用 ...

再回到 app.js ... 我们可以使用类似的方法，再去处理一下播放下一张幻灯片的按钮 ...

复制 ... 粘贴 ...

这个按钮上有类名是 next-slide ... 发生点击事件以后 ... 去执行幻灯片的 carousel 方法 ... 修改一下这个方法的参数 ... 把 prev 改成 next ...

再去试一下 ...

点击向左这个按钮 ... 可以播放上一张幻灯片 ... 再点一下向右这个按钮 ... 可以播放下一张幻灯片 ...