使用html属性标记,代码如下: <div id="myCarousel" class="carousel"> <!-- 要切换的内容--> <div class="carousel-inner"> <div class="active item">…</div> <div class="item">…</div> <div class="item">…</div> </div> <!-- 切换导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> 也可以在使用了.carousel类的元素内部添加切换内容指示工具 <!-- 焦点图指示器--> <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> 方法 .carousel(options) 初始化轮播组件,接受一个对象做为可选参数并开始循环播放. 例如: $(".carousel").carousel({ interval:2000 }) .carousel('cycle') 从左向右循环播放 .carousel('pause')中止播放 .carousel(number)播放到某个特定的帧(与数组类似,从0开始计数). .carousel('prev') 回到上一帧 .carousel('next') 回到下一帧 轮播类提供了两个事件 slide 该事件在调用slide实例方法时立刻触发 slid 该事件在轮播项切换效果完成之后触发 本实例代码如下: <style>/*metro风格样式*/ div, input, select, textarea, span, img, table, td, th, p, a, button, ul, li { border–radius: 0 0 0 0 !important; } [class^="m-icon-"] { display: inline–block; width: 14px; height: 14px; margin–top: 4px; line–height: 14px; vertical–align: top; background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons.png); background–position: 0 0; background–repeat: no–repeat; } [class^="m-icon-big-"] { display: inline–block; width: 30px; height: 30px; margin: 6px; vertical–align: top; background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons.png); background–position: 0 0px; background–repeat: no–repeat; } .m–icon–white { background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons-twhite.png); } /* Misc */ .btn.icn–only { min–width: 14px; } .btn.bigicn–only { min–width: 34px; } .m–icon–swapright { background–position: –27px –10px; […]
View Details