基于jquery的轮播插件操作

来源：互联网发布：子宫肌瘤微创手术知乎编辑：程序博客网时间：2024/05/18 18:46
基于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>
0 0