用按键控制幻灯片的播放

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

按一下键盘上的向左,还有向右的箭头,可以控制幻灯片的播放。

下面,我们去实现这个功能。 打开 app.js 这个文件 ... 我们要做的是去监听发生在文档本身上面的 keydown 这个事件,按下按键会立即触发这个事件 ...

然后再去判断一下用户按的是不是向左或者向右这两个按键 ... 按下向左按键的时候去播放上一张幻灯片 ... 按下向右按键的时候,去播放下一张幻灯片 ...

先用 jQuery 方法,包装一下 document 这个对象 ... 然后再调用 jQuery 的 on 这个方法, 去监听一下 keydown 这个事件 ... 发生这个事件,去执行一个函数 .... 我们可以把事件对象交给这个函数 ...

在这个函数里面,可以先把用户按的按键输出到控制台上看一下 ... 用一个 console.log .. 按下的具体的按键。是在事件对象的 which 这个属性里面 ...

$(document).on('keydown', function(e) {
console.log(e.which);
}

保存 ... 回到浏览器 ... 打开控制台 ... 然后,先按一下键盘上的向左这个箭头 ... 在控制台上,会显示 37 这个数字 ... 这个数字就是键盘上的向左这个箭头按键的代号 ...

再按一下向右的箭头... 会输出一个数字 39 ... 它表示的就是键盘上的向右箭头这个按键 ..

下面,我们可以利用这两个表示按键的数字,去判断一下 ... 根据按下的具体的按键,去执行指定的动作 ..

回到 app.js ....

这里,我们可以使用一个 swich 语句 ... 条件是 e.which ... 也就是看一下按下的按键的代码 ..

case 37 ... 如果按的是向左的箭头 ...

就去找到幻灯片,调用 carousel 方法,给它一个 prev 参数 ... 也就是,去播放上一张幻灯片 ... 结尾再用一个 break;

再去设置一种情况 ... case 39 ... 按的是向右箭头 ...

找到幻灯片,调用 carousel 方法,给它一个 next 参数 ... 这行代码的作用就是去播放下一张幻灯片 ... 最后再用一个 break;

switch (e.which) {
case 37:
$('#slideshow').carousel('prev');
break;

case 39:
$('#slideshow').carousel('next');
break;
}

保存 ... 回到浏览器 ...

按一下键盘上的向左的箭头 ... 会播放上一张幻灯片 ...

再按一下键盘上的向向的箭头 .... 会播放下一张幻灯片 ...

用按键控制幻灯片的播放《 Bootstrap 3 基础 》

统计

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

社会化网络

关于

微信订阅号

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