jQuery轮播
一,简单实现轮播
//轮播容器
.carousel //轮播容器--可设宽度 (carousel="轮播")
//轮播指标
.carousel-indicators //轮播指标--小圆点 (indicators="指标")<div>
data-target="#轮播容器id" <li>
data-slide-to="第几张图片" //从0开始 <li>
.active //激活图片(只可以一个) <li>
//轮播项目
.carousel-inner //轮播内部 (inner="内部")
.item //逐条列出 (item="项目,逐条列出")
.carousel-caption //轮播标题 (caption="标题") //可省略
//轮播左右键
<a href="#轮播容器id">
.carousel-control (control="控制")
left or right
data-slide="prev or next" //数据滑动"上一个 &lasquo"或者"下一个 &rsaquo"
//用js实现轮播效果
//播放时间间隔
$("轮播容器id").carousel({interval:2000})
//开始循环
$("#按钮id").click(function(e){
$("轮播容器id").carousel("cycle");
}
//暂停循环(当鼠标指向图片上时，轮播停止，鼠标挪开时，轮播继续)
$("#按钮id").click(function(e){
$("轮播容器id").carousel("pause");
}
//上一张
$("#按钮id").click(function(e){
$("轮播容器id").carousel("prev");
}
//下一张
$("#按钮id").click(function(e){
$("轮播容器id").carousel("next");
}
//第一张
$("#按钮id").click(function(e){
$("轮播容器id").carousel(0);
}
//第二张
$("#按钮id").click(function(e){
$("轮播容器id").carousel(2);
}
//轮播被切换时，触发事件
//先触发事件，然后内容变化
$("轮播容器id").on('slide.bs.carousel',function(e){
alert("轮播被切换");
})
//先内容变化，然后触发事件
$("轮播容器id").on('slid.bs.carousel',function(e){
alert("轮播被切换");
})
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> 7 <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> 8 <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script> 9 <script type="text/javascript"> 10 $(document).ready(function(e){ 11 //设置播放时间间隔 12 $("#myCaroucel").carousel({interval:500}) 13 //开始循环 14 $("#startBtn").click(function(e){ 15 $("#myCaroucel").carousel("cycle"); 16 }); 17 //暂停循环 18 $("#pauseBtn").click(function(e){ 19 $("#myCaroucel").carousel("pause"); 20 }); 21 //上一张 22 $("#prevBtn").click(function(e){ 23 $("#myCaroucel").carousel("prev"); 24 }); 25 //下一张 26 $("#nextBtn").click(function(e){ 27 $("#myCaroucel").carousel("next"); 28 }); 29 //第一张 30 $("#oneBtn").click(function(e){ 31 $("#myCaroucel").carousel(0); 32 }); 33 //第二张 34 $("#twoBtn").click(function(e){ 35 $("#myCaroucel").carousel(1); 36 }); 37 //第三张 38 $("#thereBtn").click(function(e){ 39 $("#myCaroucel").carousel(2); 40 });
41 //触发事件的回调 42 $("#myCaroucel").on('slide.bs.carousel',function(e){ 43 alert("轮播被切换"); 44 }) 45 }); 46 </script> 47 48 </head> 49 <body> 50 <div class="container"> 51 <!---轮播容器---> 52 <div id="myCaroucel" class="carousel" style="width: 600px;"> 53 <!---轮播指标---> 54 <div class="carousel-indicators"> 55 <li data-target="#myCaroucel" data-slide-to="0" class="active"></li> 56 <li data-target="#myCaroucel" data-slide-to="1"></li> 57 <li data-target="#myCaroucel" data-slide-to="2"></li> 58 </div> 59 <!---轮播项目---> 60 <div class="carousel-inner"> 61 <div class="item active"> 62 <img src="img/psb (2).jpg" /> 63 <div class="carousel-caption"><h3>猪头</h3></div> 64 </div> 65 <div class="item"> 66 <img src="img/psb (3).jpg"> 67 <div class="carousel-caption"><h3>哈哈哈</h3></div> 68 </div> 69 <div class="item"> 70 <img src="img/psb (4).jpg" /> 71 <div class="carousel-caption"><h3>我是最厉害的机器人</h3></div> 72 </div> 73 </div> 74 <!---轮播左右键---> 75 <a href="#myCaroucel" class="carousel-control left" data-slide="prev">‹</a> 76 <a href="#myCaroucel" class="carousel-control right" data-slide="next">›</a> 77 <div class="text-center"> 78 <button type="button" class="btn" id="startBtn">自动播放</button> 79 <button type="button" class="btn" id="pauseBtn">暂停播放</button> 80 <button type="button" class="btn" id="prevBtn">上一张</button> 81 <button type="button" class="btn" id="nextBtn">下一张</button> 82 <button type="button" class="btn" id="oneBtn">第一张</button> 83 <button type="button" class="btn" id="twoBtn">第二张</button> 84 <button type="button" class="btn" id="thereBtn">第三张</button> 85 </div> 86 </div> 87 </div> 88 </body> 89 </html>
