bootstrap插件之Carousel

兼容:ie9以上

特点:滑动图片看起来永远只有两帧,过度完美;是html css js的完美配合;其中html的data属性起了关键性作用

前提:normalize.css  jquery.js

html 代码:

<div class="wrapper">
<div class="carousel" id="carousel-generic">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-generic" class="active">0</li>
<li data-slide-to="1" data-target="#carousel-generic">1</li>
<li data-slide-to="2" data-target="#carousel-generic">2</li>
</ul> <!-- wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img alt="first slide" src="data:images/slide1.png" />
</div>
<div class="item">
<img alt="second slide" src="data:images/slide2.png" />
</div>
<div class="item">
<img alt="third slide" src="data:images/slide3.png" />
</div>
</div> <!-- controls -->
<a class="carousel-control left" data-slide="prev" href="#carousel-generic">
<span class="carousel-chevron-left">&lt;</span>
</a>
<a class="carousel-control right" data-slide="next" href="#carousel-generic">
<span class="carousel-chevron-right">&gt;</span>
</a>
</div>
</div>

css 代码:

.wrapper{
width:900px;
overflow: hidden;
margin: 0 auto; } .carousel{
position: relative;
width:900px;
} .carousel-inner{
position: relative;
width: 100%;
overflow: hidden;
} .carousel-inner .item{
position: relative;
display: none;
-webkit-transition:0.06s ease-in-out left;
-ms-transition: 0.6s ease-in-out left;
transition:0.6s ease-in-out left;
} .carousel-inner .active,
.carousel-inner .next,
.carousel-inner .prev{
display: block;
} .carousel-inner .active{
left:;
} .carousel-inner .next,
.carousel-inner .prev{
position: absolute;
top:;
width: 100%;
} .carousel-inner .next{
left:100%;
} .carousel-inner .prev{
left:-100%;
} .carousel-inner .next.left,
.carousel-inner .prev.right{
left:;
} .carousel-inner .active.left{
left:-100%;
} .carousel-inner .active.right{
left:100%;
} .carousel-control {
position: absolute;
top:;
bottom:;
width:15%;
font-size: 20px;
color:#fff;
text-align: center;
text-shadow:0 1px 2px rgba(0, 0, 0, 0.6);
opacity: 0.5;
} .carousel-control.left {
left:;
background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
background-repeat: repeat-x;
} .carousel-control.right {
right:;
left: auto;
background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
background-repeat: repeat-x;
} .carousel-control:hover,
.carousel-control:focus {
color: #ffffff;
text-decoration: none;
outline: none;
opacity: 0.9;
} .carousel-indicators{
position: absolute;
bottom:10px;
width:60%;
left:50%;
margin-left: -30%;
padding-left:;
text-align: center;
z-index:;
} .carousel-indicators li{
display: inline-block;
width: 10px;
height: 10px;
margin:1px;
text-indent: -9999px;
line-height:;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
border:1px solid #fff;
border-radius: 10px;
} .carousel-indicators .active{
width:12px;
height:12px;
margin:;
background-color: #fff;
}

js 代码:

(function ($) {

    "use strict";

    var Carousel = function (element, options) {

        this.$element = $(element);  // div.carousel
this.$indicators = this.$element.find(".carousel-indicators"); // ul.carousel-indicators
this.$items = this.$element.find(".item"); this.paused = false, // 动画停止了?(false)
this.sliding = false, // 正在滑动中?(false)
this.interval = null, // 有定时器吗?(null)
this.$active = null;
this.options = options; // 合并后的options this.options.pause === "hover" && this.$element.
on("mouseenter", $.proxy(this.pause, this)).
on("mouseleave", $.proxy(this.cycle, this));
}; Carousel.DEFAULTS = {
interval: 2000,
pause: "hover"
}; Carousel.fn = Carousel.prototype; Carousel.fn.pause = function () { this.paused = true; // 状态标记 this.interval = clearInterval(this.interval); // this.interval is undefined return this;
}; Carousel.fn.cycle = function (e) { e || (this.paused = false); // 标记状态 // 先清除定时器(如果有的话)
this.interval && clearInterval(this.interval); // 在重设循环滚动的定时器
this.interval = setInterval($.proxy(this.next, this), this.options.interval); return this;
}; Carousel.fn.next = function () { if (this.sliding) {
return;
} return this.slide("next");
}; Carousel.fn.prev = function () { if (this.sliding) {
return;
} return this.slide("prev");
}; Carousel.fn.getActiveIndex = function () { this.$active = this.$element.find(".item.active"); return this.$items.index(this.$active);
}; // type: ["next", "prev"]; next: targetElement
Carousel.fn.slide = function (type, next) { var $active = this.$element.find(".item.active"),
$next = next || $active[type](), // 下一帧的目标元素(注:最后一帧的下一帧是第一帧)
direction = (type === "next" ? "left" : "right"),
fallback = (type === "next" ? "first" : "last"),
isCycling = this.interval,
that = this; // 边界元素问题
if (!$next.length) {
$next = this.$items[fallback]();
} if ($next.hasClass('active')) {
return false;
} // 状态:滚动中。。。
this.sliding = true; // 停止当前动画
isCycling && this.pause(); // 开启新的动画 600毫秒
// o my god!!!!! the sequence is so important, but dont know why!!!
$next.addClass(type);
$next[0].offsetWidth; // force reflow!!!!!!!!!!!!!!
$next.addClass(direction); $active.addClass(direction); // indicator同步改变样式
if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active');
this.$element.one("slide.bs.carousel", function () {
// change indicators
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()]);
$nextIndicator && $nextIndicator.addClass("active");
});
} // 动画完成后,重置样式或开启下一帧动画
var transitionend = function () { $next.removeClass([type, direction].join(" ")).addClass("active"); $active.removeClass(["active", direction].join(" ")); // 立即触发
setTimeout(function () {
// changer indicators or begin another animation (Carousel.fn.to)
that.$element.trigger("slide.bs.carousel");
}, 0); that.sliding = false;
isCycling && that.cycle(); }; setTimeout(transitionend, 600); // 时间和css对应 }; // indicator and carousel-control with silde to
Carousel.fn.to = function (pos) { var that = this,
activeIndex = this.getActiveIndex(); if (pos > (this.$items.length - 1) || pos < 0) {
return;
} // 运动中。。。。。。。。。
if (this.sliding) {
// 当前动画完成后,会立即触发 slide.bs.carousel 事件
return this.$element.one("slide.bs.carousel", function () { that.to(pos); });
} if (activeIndex === pos) {
return this.pause().cycle();
} // 通过next或prev的方式到达this.$items[pos]
return this.slide(pos > activeIndex ? "next" : "prev", $(this.$items[pos])); }; // jquery 插件
$.fn.carousel = function (option) { return this.each(function () { var $this = $(this),
data = $this.data("bs.carsouel"),
options = $.extend({}, Carousel.DEFAULTS, typeof option == 'object' && option); if (!data) {
// 妙处:把所有方法附加到carousel对象上 ==>
$this.data("bs.carousel", (data = new Carousel(this, options))); // $this.data("bs.carousel") = data 就是滚动对象的引用
} if (typeof option === "number") {
// 直接切换到第几帧
data.to(option);
} else if (typeof option === "string") {
data[option]();
} else if (options.interval) {
// interval is true 则自动播放
data.pause().cycle();
} });
}; $.fn.carousel.Constructor = Carousel; // 事件绑定
$(document).on("click.carousel.data-api", "[data-slide-to], [data-slide]", function (e) {
e.preventDefault(); var $this = $(this),
$target = $($this.attr("data-target") || $this.attr("href")),
slide = $this.attr("data-slide"),
slideIndex = $this.attr("data-slide-to"); if (slide) {
$target.data("bs.carousel").slide(slide);
} else if (slideIndex) {
$target.data("bs.carousel").to(slideIndex);
} }); // 应用
$(".carousel").carousel();
})(jQuery);
上一篇:FMX 高手博客


下一篇:android实现json数据的解析和把数据转换成json格式的字符串