全面解析多种Bootstrap图片轮播效果(2)

.carousel("cycle"):从左向右循环播放;
.carousel("pause"):停止循环播放;
.carousel("number"):循环到指定的帧,下标从0开始,类似数组;
.carousel("prev"):返回到上一帧;
.carousel("next"):下一帧

用data属性控制轮播:

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 轮播(Carousel)插件方法</title> <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div data-wrap="true" data-interval="1000"> <!-- 轮播(Carousel)指标 --> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播(Carousel)项目 --> <div> <div> <img src="https://www.jb51.net/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div> <img src="https://www.jb51.net/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div> <img src="https://www.jb51.net/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div> <!-- 轮播(Carousel)导航 --> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a> <!-- 控制按钮 --> <div> <input type="button" value="Start"> <input type="button" value="Pause"> <input type="button" value="Previous Slide"> <input type="button" value="Next Slide"> <input type="button" value="Slide 1"> <input type="button" value="Slide 2"> <input type="button" value="Slide 3"> </div> </div> </body> </html>

声明式方法是通过定义 data 属性来实现,data 属性可以很容易地控制轮播的位置。其主要包括以下几种:

1 . data-ride 属性:取值 carousel,并且将其定义在 carousel 上。

2 . data-target 属性:取值 carousel 定义的 ID 名或者其他样式识别符,如前面示例所示,取值为“#slidershow”,并且将其定义在轮播图计数器的每个 li 上。

3 . data-slide 属性:取值包括 prev,next,prev表示向后滚动,next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上,同时设置控制器 href 值为容器 4 . carousel 的 ID 名或其他样式识别符。

5 . data-slide-to 属性:用来传递某个帧的下标,比如 data-slide-to="2",可以直接跳转到这个指定的帧(下标从0开始计),同样定义在轮播图计数器的每个 li 上。

在这里需要注意可以为 #slidershow 层添加 slide  样式,使用图片与图片切换效果有平滑感。

<div data-ride="carousel"> ... </div>

除了data-ride="carousel"、data-slide、data-slide-to 以外,轮播组件还支持其他三个自定义属性:

全面解析多种Bootstrap图片轮播效果

如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。

<div data-ride="carousel" data-wrap="false" data-interval="1000"> ...... </div>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

精彩专题分享:

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

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