手工设置播放上一张与下一张幻灯片的按钮

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面, 我们去给这个按钮添加点真正的功能。先去创建一个目录 ... 命名为 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 ...

再去试一下 ...

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

手工设置播放上一张与下一张幻灯片的按钮《 Bootstrap 3 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点