bootstrap中的焦点图实例

使用html属性标记,代码如下:

  1. <div id="myCarousel" class="carousel">
  2.   <!– 要切换的内容–>
  3.   <div class="carousel-inner">
  4.     <div class="active item"></div>
  5.     <div class="item"></div>
  6.     <div class="item"></div>
  7.   </div>
  8.   <!– 切换导航 –>
  9.   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  10.   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
  11. </div>

也可以在使用了.carousel类的元素内部添加切换内容指示工具

  1.   <!– 焦点图指示器–>
  2. <ol class="carousel-indicators">
  3. <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  4. <li data-target="#myCarousel" data-slide-to="1"></li>
  5. <li data-target="#myCarousel" data-slide-to="2"></li>
  6. </ol>

方法

.carousel(options)

初始化轮播组件,接受一个对象做为可选参数并开始循环播放.

例如:

  1. $(".carousel").carousel({
  2.    interval:2000
  3. })

.carousel('cycle') 从左向右循环播放

.carousel('pause')中止播放

.carousel(number)播放到某个特定的帧(与数组类似,从0开始计数).

.carousel('prev') 回到上一帧

.carousel('next') 回到下一帧

轮播类提供了两个事件

slide 该事件在调用slide实例方法时立刻触发

slid 该事件在轮播项切换效果完成之后触发

本实例代码如下:

  1. <style>/*metro风格样式*/
  2.         div, input, select, textarea, span, img, table, td, th, p, a, button, ul, li
  3.         {
  4.             borderradius: 0 0 0 0 !important;
  5.         }
  6.                                                      
  7.         [class^="m-icon-"]
  8.         {
  9.             display: inlineblock;
  10.             width: 14px;
  11.             height: 14px;
  12.             margintop: 4px;
  13.             lineheight: 14px;
  14.             verticalalign: top;
  15.   backgroundimage: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons.png);
  16.             backgroundposition: 0 0;
  17.             backgroundrepeat: norepeat;
  18.         }
  19.                                                      
  20.         [class^="m-icon-big-"]
  21.         {
  22.             display: inlineblock;
  23.             width: 30px;
  24.             height: 30px;
  25.             margin: 6px;
  26.             verticalalign: top;
  27.   backgroundimage: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons.png);
  28.             backgroundposition: 0 0px;
  29.             backgroundrepeat: norepeat;
  30.         }
  31.                                                      
  32.         .miconwhite
  33.         {
  34.             backgroundimage: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons-twhite.png);
  35.         }
  36.                                                      
  37.         /*  Misc */
  38.         .btn.icnonly
  39.         {
  40.             minwidth: 14px;
  41.         }
  42.         .btn.bigicnonly
  43.         {
  44.             minwidth: 34px;
  45.         }
  46.         .miconswapright
  47.         {
  48.             backgroundposition: 27px 10px;
  49.         }
  50.         .miconswapdown
  51.         {
  52.             backgroundposition: 68px 10px;
  53.         }
  54.         .miconswapleft
  55.         {
  56.             backgroundposition: 8px 10px;
  57.         }
  58.         .miconswapup
  59.         {
  60.             backgroundposition: 46px 10px;
  61.         }
  62.         .miconbigswapright
  63.         {
  64.             backgroundposition: 42px 28px;
  65.         }
  66.         .miconbigswapdown
  67.         {
  68.             backgroundposition: 115px 28px;
  69.         }
  70.         .miconbigswapleft
  71.         {
  72.             backgroundposition: 6px 28px;
  73.         }
  74.         .miconbigswapup
  75.         {
  76.             backgroundposition: 78px 28px;
  77.         }      
  78.                                                   
  79.         /*******************焦点图样式********************************************************/
  80.         .carousel
  81.         {
  82.             marginbottom: 0;
  83.         }
  84.                                                      
  85.         .carousel .carouselcaption a
  86.         {
  87.             color: #fff;
  88.         }
  89.                                                      
  90.         .carousel .carouselinner .item
  91.         {
  92.             marginbottom: 10px;
  93.             height:360px;
  94.         }
  95.                                                      
  96.         .carousel a.carouselcontrol
  97.         {
  98.             border: none;
  99.             padding: 5px;
  100.             display: none;
  101.         }
  102.                                                      
  103.         .carousel:hover a.carouselcontrol
  104.         {
  105.             display: block;
  106.             width: 40px;
  107.             height: 40px;
  108.         }
  109. </style>
  1. <div class="container">
  2.     <div class="row-fluid">
  3.         <div class="span7">
  4.             <div id="myCarousel" class="carousel slide">
  5.                 <!– 焦点图指示器<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>–>
  6.                 <div class="carousel-inner">
  7.                     <div class="active item">
  8.                         <img src="http://www.kuiyu.net/images/image5.jpg" />
  9.                         <div class="carousel-caption">
  10.                             <h4>
  11.                                 <a href="http://www.kuiyu.net">奎宇工作室</a>
  12.                             </h4>
  13.                             <p>
  14.                                 奎宇工作室创建于2009年,专注于中小企业或个人互联信息化领域技术支持.
  15.                             </p>
  16.                         </div>
  17.                     </div>
  18.                     <div class="item">
  19.                         <img src="http://www.kuiyu.net/images/image4.jpg" />
  20.                         <div class="carousel-caption">
  21.                             <h4>
  22.                                 <a href="http://www.kuiyu.net/tg/sdp">全球3D拍</a>
  23.                             </h4>
  24.                             <p>
  25.                                 让你足不出户游遍世界美景.
  26.                             </p>
  27.                         </div>
  28.                     </div>
  29.                     <div class="item">
  30.                         <img src="http://www.kuiyu.net/images/image3.jpg" />
  31.                         <div class="carousel-caption">
  32.                             <h4>
  33.                                 <a target="_blank" href="http://www.kuiyu.net/tg/sst/">白富美普洱茶油贴</a>
  34.                             </h4>
  35.                             <p>
  36.                                 早上贴,晚上瘦,轻松减肥分健康生活!
  37.                             </p>
  38.                         </div>
  39.                     </div>
  40.                     <div class="item">
  41.                         <img src="http://www.kuiyu.net/images/image2.jpg" />
  42.                         <div class="carousel-caption">
  43.                             <h4>
  44.                                 <a target="_blank" href="http://www.kuiyu.net/tg/zxkf/">左旋360咖啡</a>
  45.                             </h4>
  46.                             <p>
  47.                                    月减20-30斤,不反弹,是普通减肥产品效果的10倍
  48.                             </p>
  49.                         </div>
  50.                     </div>
  51.                     <div class="item">
  52.                         <img src="http://www.kuiyu.net/images/image6.jpg" />
  53.                         <div class="carousel-caption">
  54.                             <h4>
  55.                                 <a target="_blank" href="http://www.kuiyu.net/tg/mb">可肤冰肌白</a>
  56.                             </h4>
  57.                             <p>
  58.                                    轻松一抹 亮白全身,7天炫出嫩白肌肤,缔造晶莹冰美人
  59.                             </p>
  60.                         </div>
  61.                     </div>
  62.                     <div class="item">
  63.                         <img src="http://www.kuiyu.net/images/image1.jpg" />
  64.                         <div class="carousel-caption">
  65.                             <h4>
  66.                                 <a target="_blank" href="http://www.kuiyu.net/tg/cy">加入高佣金联盟</a>
  67.                             </h4>
  68.                             <p>
  69.                                 高佣金联盟是全国首家正规单品CPS平台,依托联盟内的优质产品、强大人气、流量和互动性,以及成熟的广告模式,为广大推广客提供各类高转化、高佣金产品,提供准确无误的订单跟踪、专业的客服服务,以达到推广收益最大化.
  70.                             </p>
  71.                         </div>
  72.                     </div>
  73.                 </div><a class="carousel-control left" href="#myCarousel" data-slide="prev"><em class="m-icon-big-swapleft m-icon-white"></em></a><a class="carousel-control right" href="#myCarousel" data-slide="next"><em class="m-icon-big-swapright m-icon-white"></em></a>
  74.             </div>
  75.         </div>
  76.         <div class="span5">
  77.         </div>
  78.     </div>
  79. </div>

from:http://www.kuiyu.net/art-36.html

发表评论