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("轮播被切换");

  })

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(e){
//设置播放时间间隔
$("#myCaroucel").carousel({interval:500})
//开始循环
$("#startBtn").click(function(e){
$("#myCaroucel").carousel("cycle");
});
//暂停循环
$("#pauseBtn").click(function(e){
$("#myCaroucel").carousel("pause");
});
//上一张
$("#prevBtn").click(function(e){
$("#myCaroucel").carousel("prev");
});
//下一张
$("#nextBtn").click(function(e){
$("#myCaroucel").carousel("next");
});
//第一张
$("#oneBtn").click(function(e){
$("#myCaroucel").carousel(0);
});
//第二张
$("#twoBtn").click(function(e){
$("#myCaroucel").carousel(1);
});
//第三张
$("#thereBtn").click(function(e){
$("#myCaroucel").carousel(2);
});
//触发事件的回调
$("#myCaroucel").on('slide.bs.carousel',function(e){
alert("轮播被切换");
})
});
</script> </head>
<body>
<div class="container">
<!---轮播容器--->
<div id="myCaroucel" class="carousel" style="width: 600px;">
<!---轮播指标--->
<div class="carousel-indicators">
<li data-target="#myCaroucel" data-slide-to="0" class="active"></li>
<li data-target="#myCaroucel" data-slide-to="1"></li>
<li data-target="#myCaroucel" data-slide-to="2"></li>
</div>
<!---轮播项目--->
<div class="carousel-inner">
<div class="item active">
<img src="img/psb (2).jpg" />
<div class="carousel-caption"><h3>猪头</h3></div>
</div>
<div class="item">
<img src="img/psb (3).jpg">
<div class="carousel-caption"><h3>哈哈哈</h3></div>
</div>
<div class="item">
<img src="img/psb (4).jpg" />
<div class="carousel-caption"><h3>我是最厉害的机器人</h3></div>
</div>
</div>
<!---轮播左右键--->
<a href="#myCaroucel" class="carousel-control left" data-slide="prev">&lsaquo;</a>
<a href="#myCaroucel" class="carousel-control right" data-slide="next">&rsaquo;</a>
<div class="text-center">
<button type="button" class="btn" id="startBtn">自动播放</button>
<button type="button" class="btn" id="pauseBtn">暂停播放</button>
<button type="button" class="btn" id="prevBtn">上一张</button>
<button type="button" class="btn" id="nextBtn">下一张</button>
<button type="button" class="btn" id="oneBtn">第一张</button>
<button type="button" class="btn" id="twoBtn">第二张</button>
<button type="button" class="btn" id="thereBtn">第三张</button>
</div>
</div>
</div>
</body>
</html>
上一篇:优美的代码:do...while(0)


下一篇:tomcat警告WARNING: An attempt was made to authenticate the locked user "user"