18.bootstrap第章轮播插件_第1页
18.bootstrap第章轮播插件_第2页
18.bootstrap第章轮播插件_第3页
全文预览已结束

VIP免费下载

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、18学习要点:1.轮播插件讲 师恢b本课 由 北乐本节课主要学下 Bootstrap 中的轮播插件。轮播插件就是将几张同等大小的大图,按照顺序依次。/基本实例。li dali daarget=#myCarouselarget=#myCarouseldata-slide-to=1data-slide-to=2data 属性解释:1.data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置; 2.data-slide-to 来向轮播底部创建一个原始滑动索引,data-slide-to=2将把滑动块移动到一个特定的索引,索引从 0 开始计数。3.data-ride

2、=carousel属性用户标记轮播在页面加载时开始动画。轮播插件有三个自定义属性:如果在 JavaScript 调用就直接使用键值对方法,并去掉 data-;/设置自定义属性$(#myCarousel).carousel(/设置自动/2 秒erval : 2000,/设置暂停按钮的事件 pause : hover,/只播一次 wrap : false,);轮播插件还提供了一些方法,如下:/点击按钮执行$(button).on(click, function/点击后,自动() $(#myCarousel).carousel(cycle);/其他方法名称描述slide.bs.carousel当调用

3、 slide 实例方式时立即触发该事件。slid.bs.carousel当轮播完成一个幻灯片触发该事件。方法名称描述cycle循环各帧(默认从左到右)pause停止轮播number轮播到指定的上(小标从 0 开始,类似数组)prev循环轮播到上一个项目next循环轮播到下一个项目属性名称描述data-erval默认值 5000,幻灯片的等待时间(毫秒)。如果为 false,轮播将不会自动开始循环。data-pause默认鼠标停留在幻灯片区域(hover)即暂停轮播,鼠标离开即启动轮播。data-wrap默认值 true,轮播是否持续循环。/事件$(#myCarousel).on(slide.bs.carousel, function () alert(当调用 slide 实例方式时立即触发););$(#myCarousel).on(slid.bs.carousel, functionaler

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论