基于jquery的轮播插件操作

最新推荐文章于 2021-06-19 07:33:30 发布

mischen520

最新推荐文章于 2021-06-19 07:33:30 发布

阅读量495

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/miachen520/article/details/52137094

版权

bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基于jquery的轮播插件操作

</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>轮播插件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        a:focus{
            outline:none;
        }

    </style>
</head>
<body>
<!--data-ride="carousel"实现图片自动轮播-->
  <div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:900px;">
      <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
      </ol>
      <div class="carousel-inner">
          <div class="item active">
          <img src="img/1.jpg" alt="第一张"/>

      </div>
      <div class="item">
          <img src="img/2.jpg" alt="第二张"/>
      </div>
      <div class="item">
          <img src="img/3.jpg" alt="第三张"/>
      </div>
</div>

  <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
  <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
  </div>
<button id="cycle" class="btn btn-default">开始</button>
<button id="pause" class="btn btn-default">停止</button>
<button id="number" class="btn btn-default">播放第三条</button>
<button id="prev" class="btn btn-default">上一个</button>
<button id="next" class="btn btn-default">下一个</button>

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
   // $('#myCarousel').carousel({
       //设置自动播放2秒
    //    interval:2000,
        //设置暂停按钮的事件
   //     pause:'hover',
        //只播一次
   //     wrap:false,
    //});
   //默认五秒钟轮播
    $('#cycle').on('click',function(){
        $('#myCarousel').carousel('cycle');
    });
   //停止轮播
   $('#pause').on('click',function(){
       $('#myCarousel').carousel('pause');
   });
   //直接跳到第三张
   $('#number').on('click',function(){
       $('#myCarousel').carousel(2);
   });
   //上一张
   $('#prev').on('click',function(){
       $('#myCarousel').carousel('prev');
   });
   //下一张
   $('#next').on('click',function(){
       $('#myCarousel').carousel('next');
   });
   $('#myCarousel').on('slide.bs.carousel',function(){
       alert('调用之前触发此事件');
   });
   $('#myCarousel').on('slid.bs.carousel',function(){
       alert('调用之后触发此事件');
   });

</script>
</body>
</html>