bootstrap图片轮播
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!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= "http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script> <script src= "http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js" ></script> </head> <body> <div id= "myCarousel" class = "carousel slide" > <!-- 轮播(Carousel)指标 --> <ol class = "carousel-indicators" > <li data-target= "#myCarousel" data-slide-to= "0" class = "active" ></li> <li data-target= "#myCarousel" data-slide-to= "1" ></li> <li data-target= "#myCarousel" data-slide-to= "2" ></li> </ol> <!-- 轮播(Carousel)项目 --> <div class = "carousel-inner" > <div class = "item active" > <img src= "/wp-content/uploads/2014/07/slide1.png" alt= "First slide" > </div> <div class = "item" > <img src= "/wp-content/uploads/2014/07/slide2.png" alt= "Second slide" > </div> <div class = "item" > <img src= "/wp-content/uploads/2014/07/slide3.png" alt= "Third slide" > </div> </div> <!-- 轮播(Carousel)导航 --> <a class = "carousel-control left" href= "#myCarousel" data-slide= "prev" >‹</a> <a class = "carousel-control right" href= "#myCarousel" data-slide= "next" >›</a> </div> </body> </html> |
带标题轮播(手动):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!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= "http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script> <script src= "http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js" ></script> </head> <body> <div id= "myCarousel" class = "carousel slide" > <!-- 轮播(Carousel)指标 --> <ol class = "carousel-indicators" > <li data-target= "#myCarousel" data-slide-to= "0" class = "active" ></li> <li data-target= "#myCarousel" data-slide-to= "1" ></li> <li data-target= "#myCarousel" data-slide-to= "2" ></li> </ol> <!-- 轮播(Carousel)项目 --> <div class = "carousel-inner" > <div class = "item active" > <img src= "/wp-content/uploads/2014/07/slide1.png" alt= "First slide" > <div class = "carousel-caption" >标题 1 </div> </div> <div class = "item" > <img src= "/wp-content/uploads/2014/07/slide2.png" alt= "Second slide" > <div class = "carousel-caption" >标题 2 </div> </div> <div class = "item" > <img src= "/wp-content/uploads/2014/07/slide3.png" alt= "Third slide" > <div class = "carousel-caption" >标题 3 </div> </div> </div> <!-- 轮播(Carousel)导航 --> <a class = "carousel-control left" href= "#myCarousel" data-slide= "prev" >‹</a> <a class = "carousel-control right" href= "#myCarousel" data-slide= "next" >›</a> </div> </body> </html> |
JS控制自动轮播:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <!DOCTYPE html> <html> <head> <title>BootstrapJS控制轮播</title> <link href= "http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel= "stylesheet" > <script src= "http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script> <script src= "http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js" ></script> </head> <body> <div id= "myCarousel" class = "carousel slide" > <!-- 轮播(Carousel)指标 --> <ol class = "carousel-indicators" > <li data-target= "#myCarousel" data-slide-to= "0" class = "active" ></li> <li data-target= "#myCarousel" data-slide-to= "1" ></li> <li data-target= "#myCarousel" data-slide-to= "2" ></li> </ol> <!-- 轮播(Carousel)项目 --> <div class = "carousel-inner" > <div class = "item active" > <img src= "/wp-content/uploads/2014/07/slide1.png" alt= "First slide" > </div> <div class = "item" > <img src= "/wp-content/uploads/2014/07/slide2.png" alt= "Second slide" > </div> <div class = "item" > <img src= "/wp-content/uploads/2014/07/slide3.png" alt= "Third slide" > </div> </div> <!-- 轮播(Carousel)导航 --> <a class = "carousel-control left" href= "#myCarousel" data-slide= "prev" >‹</a> <a class = "carousel-control right" href= "#myCarousel" data-slide= "next" >›</a> <!-- 控制按钮 --> <div style= "text-align:center;" > <input type= "button" class = "btn start-slide" value= "Start" > <input type= "button" class = "btn pause-slide" value= "Pause" > <input type= "button" class = "btn prev-slide" value= "Previous Slide" > <input type= "button" class = "btn next-slide" value= "Next Slide" > <input type= "button" class = "btn slide-one" value= "Slide 1" > <input type= "button" class = "btn slide-two" value= "Slide 2" > <input type= "button" class = "btn slide-three" value= "Slide 3" > </div> </div> <script> $(function(){ // 初始化轮播 $( ".start-slide" ).click(function(){ $( "#myCarousel" ).carousel( 'cycle' ); }); // 停止轮播 $( ".pause-slide" ).click(function(){ $( "#myCarousel" ).carousel( 'pause' ); }); // 循环轮播到上一个项目 $( ".prev-slide" ).click(function(){ $( "#myCarousel" ).carousel( 'prev' ); }); // 循环轮播到下一个项目 $( ".next-slide" ).click(function(){ $( "#myCarousel" ).carousel( 'next' ); }); // 循环轮播到某个特定的帧 $( ".slide-one" ).click(function(){ $( "#myCarousel" ).carousel( 0 ); }); $( ".slide-two" ).click(function(){ $( "#myCarousel" ).carousel( 1 ); }); $( ".slide-three" ).click(function(){ $( "#myCarousel" ).carousel( 2 ); }); }); </script> </body> </html> |
在 carousel() 方法中可以设置具体的参数,如:
属性名称 |
类型 |
默认值 |
描述 |
interval |
number |
5000 |
幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环 |
pause |
string |
hover |
默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放 |
wrap |
布尔值 |
true |
轮播是否持续循环 |
使用时,在初始化插件的时候可以传关相关的参数,如:
$("#slidershow").carousel({
interval: 3000
});
Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法,简单说明如下:
- .carousel("cycle"):从左向右循环播放;
- .carousel("pause"):停止循环播放;
- .carousel("number"):循环到指定的帧,下标从0开始,类似数组;
- .carousel("prev"):返回到上一帧;
- .carousel("next"):下一帧
用data属性控制轮播:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!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= "http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script> <script src= "http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js" ></script> </head> <body> <div id= "myCarousel" class = "carousel slide" data-wrap= "true" data-interval= "1000" > <!-- 轮播(Carousel)指标 --> <ol class = "carousel-indicators" > <li data-target= "#myCarousel" data-slide-to= "0" class = "active" ></li> <li data-target= "#myCarousel" data-slide-to= "1" ></li> <li data-target= "#myCarousel" data-slide-to= "2" ></li> </ol> <!-- 轮播(Carousel)项目 --> <div class = "carousel-inner" > <div class = "item active" > <img src= "/wp-content/uploads/2014/07/slide1.png" alt= "First slide" > </div> <div class = "item" > <img src= "/wp-content/uploads/2014/07/slide2.png" alt= "Second slide" > </div> <div class = "item" > <img src= "/wp-content/uploads/2014/07/slide3.png" alt= "Third slide" > </div> </div> <!-- 轮播(Carousel)导航 --> <a class = "carousel-control left" href= "#myCarousel" data-slide= "prev" >‹</a> <a class = "carousel-control right" href= "#myCarousel" data-slide= "next" >›</a> <!-- 控制按钮 --> <div style= "text-align:center;" > <input type= "button" class = "btn start-slide" value= "Start" > <input type= "button" class = "btn pause-slide" value= "Pause" > <input type= "button" class = "btn prev-slide" value= "Previous Slide" > <input type= "button" class = "btn next-slide" value= "Next Slide" > <input type= "button" class = "btn slide-one" value= "Slide 1" > <input type= "button" class = "btn slide-two" value= "Slide 2" > <input type= "button" class = "btn slide-three" 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 id="slidershow" class="carousel slide" data-ride="carousel">
...
</div>
除了data-ride="carousel"、data-slide、data-slide-to 以外,轮播组件还支持其他三个自定义属性:
属性名称 |
类型 |
默认值 |
描述 |
data-interval |
number |
5000 |
幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环 |
data-pause |
string |
hover |
默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放 |
data-wrap |
布尔值 |
true |
轮播是否持续循环 |
如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。
<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
......
</div>
参考:http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html
作者: lost blog
出处: http://www.cnblogs.com/JAYIT/
关于作者:专注服务器端开发
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接 如有问题, 可邮件(sawyershaw@qq.com)咨询.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用