Bootstrap carousel轮转图的使用实例详解(2)

data-ride="carousel" 和 data-slide="prev"、 data-slide="next" 三个语句去掉了,我们来使用JS代码实现“图片自动轮播”和“向前、向后按钮”的功能实现。

使用JS实现“图片自动轮播”和“向前、向后按钮”的功能实现

默认情况之下,如果 carousel 容器上定义了 data-ride="carousel" 属性,页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性,可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下:

复制代码 代码如下:


$(".carousel").carousel();

也可以通过容器的 ID 来指定:

复制代码 代码如下:


$("#slidershow").carousel();

在 carousel() 方法中可以设置具体的参数,如:

属性名称

 

类型

 

默认值

 

描述

 

interval

 

number

 

5000

 

幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环

 

pause

 

string

 

hover

 

默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放

 

wrap

 

布尔值

 

true

 

轮播是否持续循环

 

使用时,在初始化插件的时候可以传关相关的参数,如:

$("#slidershow").carousel({ interval: 3000 });

实际上,当我们给carousel()方法配置参数之后,轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法,简单说明如下:

•.carousel("cycle"):从左向右循环播放;

•.carousel("pause"):停止循环播放;

•.carousel("number"):循环到指定的帧,下标从0开始,类似数组;

•.carousel("prev"):返回到上一帧;

•.carousel("next"):下一帧

例如,前面的调用方法,向前和向后两个按钮还无法正常工作,其实可以通过 .carousel("prev") 和 .carousel("next") 方法让他们能正常工作,代码如下:

$(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").carousel("next"); }); }); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> body { padding: 10px; margin: 10px; } </style> </head> <body> <div data-ride="carousel"> <!-- Indicators --> <ol> <li data-target="#carousel-example" data-slide-to="0"></li> <li data-target="#carousel-example" data-slide-to="1"></li> <li data-target="#carousel-example" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div> <div> <img src="https://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" alt="..." /> <div>...</div> </div> <div> <img src="https://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" alt="..." /> <div>...</div> </div> <div> <img src="https://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" alt="..." /> <div>...</div> </div> </div> <!-- Controls --> <a href="#carousel-example" data-slide="prev"> <span></span></a> <a href="#carousel-example" data-slide="next"> <span></span></a> </div> <!--<script> $(function() { $('.carousel').carousel(); }); </script>--> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> <!--<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>--> <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>--> </body> </html>

脚本之家推荐bootstrap相关专题:

BootStrap组件操作技巧

BootStrap相关知识汇总

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpjxp.html