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.             border–radius: 0 0 0 0 !important;
5.         }
6.                                                      
7.         [class^="m-icon-"]
8.         {
9.             display: inline–block;
10.             width: 14px;
11.             height: 14px;
12.             margin–top: 4px;
13.             line–height: 14px;
14.             vertical–align: top;
15.   background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons.png);
16.             background–position: 0 0;
17.             background–repeat: no–repeat;
18.         }
19.                                                      
20.         [class^="m-icon-big-"]
21.         {
22.             display: inline–block;
23.             width: 30px;
24.             height: 30px;
25.             margin: 6px;
26.             vertical–align: top;
27.   background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons.png);
28.             background–position: 0 0px;
29.             background–repeat: no–repeat;
30.         }
31.                                                      
32.         .m–icon–white
33.         {
34.             background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons-twhite.png);
35.         }
36.                                                      
37.         /*  Misc */
38.         .btn.icn–only
39.         {
40.             min–width: 14px;
41.         }
42.         .btn.bigicn–only
43.         {
44.             min–width: 34px;
45.         }
46.         .m–icon–swapright
47.         {
48.             background–position: –27px –10px;
49.         }
50.         .m–icon–swapdown
51.         {
52.             background–position: –68px –10px;
53.         }
54.         .m–icon–swapleft
55.         {
56.             background–position: –8px –10px;
57.         }
58.         .m–icon–swapup
59.         {
60.             background–position: –46px –10px;
61.         }
62.         .m–icon–big–swapright
63.         {
64.             background–position: –42px –28px;
65.         }
66.         .m–icon–big–swapdown
67.         {
68.             background–position: –115px –28px;
69.         }
70.         .m–icon–big–swapleft
71.         {
72.             background–position: –6px –28px;
73.         }
74.         .m–icon–big–swapup
75.         {
76.             background–position: –78px –28px;
77.         }      
78.                                                   
79.         /*******************焦点图样式********************************************************/
80.         .carousel
81.         {
82.             margin–bottom: 0;
83.         }
84.                                                      
85.         .carousel .carousel–caption a
86.         {
87.             color: #fff;
88.         }
89.                                                      
90.         .carousel .carousel–inner .item
91.         {
92.             margin–bottom: 10px;
93.             height:360px;
94.         }
95.                                                      
96.         .carousel a.carousel–control
97.         {
98.             border: none;
99.             padding: 5px;
100.             display: none;
101.         }
102.                                                      
103.         .carousel:hover a.carousel–control
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