华山资源网

全面解析多种Bootstrap图片轮播效果
网络编程 2024/11/18 佚名
3 1

分享了三种Bootstrap图片轮播效果，相信总有一款你满意的！

第一种效果：Bootstrap简单轮播

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
 <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="/UploadFiles/2021-04-02/jquery.min.js">带标题轮播(手动)





<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title>
 <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="/UploadFiles/2021-04-02/jquery.min.js">JS控制自动轮播





<!DOCTYPE html>
<html>
<head>
 <title>BootstrapJS控制轮播</title>
 <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="/UploadFiles/2021-04-02/jquery.min.js">


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


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


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





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






Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法，简单说明如下:


.carousel("cycle")：从左向右循环播放；

.carousel("pause")：停止循环播放；

.carousel("number")：循环到指定的帧，下标从0开始，类似数组；

.carousel("prev")：返回到上一帧；

.carousel("next")：下一帧


用data属性控制轮播：





<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 轮播（Carousel）插件方法</title>
 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="/UploadFiles/2021-04-02/jquery.min.js">


声明式方法是通过定义 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 id="slidershow" class="carousel slide" data-ride="carousel">
 ...
</div>






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


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


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





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






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


Bootstrap学习教程


Bootstrap实战教程


Bootstrap Table使用教程


Bootstrap插件使用教程


精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播


以上就是针对javascript图片轮播进行的详细介绍，希望本文对大家学习javascript程序设计有所帮助。


                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com