|
// Generated by CoffeeScript 1.6.1
(function() {
(function($,window,document) {
var Plugin,defaults,pluginName;
pluginName = "slidesjs";
defaults = {
width: 940,height: 528,start: 1,navigation: {
active: true,effect: "slide"
},pagination: {
active: true,play: {
active: false,effect: "slide",interval: 5000,auto: false,swap: true,pau<a href="https://www.52php.cn/tag/SEO/" title="SEO">SEO</a>nHover: false,restartDelay: 2500
},effect: {
slide: {
speed: 500
},fade: {
speed: 300,crossfade: true
}
},callback: {
loaded: function() {},start: function() {},complete: function() {}
}
};
Plugin = (function() {
function Plugin(element,options) {
this.element = element;
this.options = $.extend(true,{},options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
return Plugin;
})();
//初始化插件
Plugin.prototype.init = function() {
var $element,nextButton,pagination,playButton,prevButton,stopButton,_this = this;
$element = $(this.element);
//？？？？
this.data = $.data(this);
$.data(this,"animating",false);
$.data(this,"total",$element.children().not(".slidesjs-navigation",$element).length);
//current从0开始，对应图片下标
$.data(this,"current",this.options.start - 1);
//浏览器类型
$.data(this,"vendorPrefix",this._getVendorPrefix());
if (typeof TouchEvent !== "undefined") {
$.data(this,"touch",true);
//检测有触摸时间，滚动时间减半
this.options.effect.slide.speed = this.options.effect.slide.speed / 2;
}
$element.css({
overflow: "hidden"
});
//包裹图片
$element.slidesContainer = $element.children().not(".slidesjs-navigation",$element).wrapAll("<div class='slidesjs-container'>",$element).parent().css({
overflow: "hidden",position: "relative"
});
//内部再包裹一层
$(".slidesjs-container",$element).wrapInner("<div class='slidesjs-control'>",$element).children();
//
$(".slidesjs-control",$element).css({
position: "relative",left: 0
})
//设置图片样式
$(".slidesjs-control",$element).children().addClass("slidesjs-slide").css({
position: "absolute",top: 0,left: 0,width: "100%",zIndex: 0,display: "none",webkitBackfaceVisibility: "hidden"
});
//每个图片设置下标
$.each($(".slidesjs-control",$element).children(),function(i) {
var $slide;
$slide = $(this);
return $slide.attr("slidesjs-index",i);
});
//若有触摸事件，则绑定
if (this.data.touch) {
$(".slidesjs-control",$element).on("touchstart",function(e) {
return _this._touchstart(e);
});
$(".slidesjs-control",$element).on("touchmove",function(e) {
return _this._touchmove(e);
});
$(".slidesjs-control",$element).on("touchend",function(e) {
return _this._touchend(e);
});
}
$element.fadeIn(0);
this.update();
if (this.data.touch) {
this._setuptouch();
}
//给当前展示图片设置zIndex
$(".slidesjs-control",$element).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0,function() {
return $(this).css({
zIndex: 10
});
});
//生成前一张，后一张按钮
if (this.options.navigation.active) {
prevButton = $("<a>",{
"class": "slidesjs-previous slidesjs-navigation",href: "#",title: "Previous",text: "Previous"
}).appendTo($element);
nextButton = $("<a>",{
"class": "slidesjs-next slidesjs-navigation",title: "Next",text: "Next"
}).appendTo($element);
}
$(".slidesjs-next",$element).click(function(e) {
e.preventDefault();
_this.stop(true);
return _this.next(_this.options.navigation.effect);
});
$(".slidesjs-previous",$element).click(function(e) {
e.preventDefault();
_this.stop(true);
return _this.previous(_this.options.navigation.effect);
});
if (this.options.play.active) {
playButton = $("<a>",{
"class": "slidesjs-play slidesjs-navigation",title: "Play",text: "Play"
}).appendTo($element);
stopButton = $("<a>",{
"class": "slidesjs-stop slidesjs-navigation",title: "Stop",text: "Stop"
}).appendTo($element);
playButton.click(function(e) {
e.preventDefault();
return _this.play(true);
});
stopButton.click(function(e) {
e.preventDefault();
return _this.stop(true);
});
if (this.options.play.swap) {
stopButton.css({
display: "none"
});
}
}
if (this.options.pagination.active) {
//生成图片导航
pagination = $("<ul>",{
"class": "slidesjs-pagination"
}).appendTo($element);
$.each(new Array(this.data.total),function(i) {
var paginationItem,paginationLink;
paginationItem = $("<li>",{
"class": "slidesjs-pagination-item"
}).appendTo(pagination);
paginationLink = $("<a>",{
href: "#","data-slidesjs-item": i,html: i + 1
}).appendTo(paginationItem);
//导航绑定事件
return paginationLink.click(function(e) {
e.preventDefault();
_this.stop(true);
// ($(e.currentTarget).attr("data-slidesjs-item") * 1 把取到的字符串数字转为数字
return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1);
});
});
}
//窗口缩放
$(window).bind("resize",function() {
return _this.update();
});
//导航高亮当前图片位置
this._setActive();
//是否自动播放
if (this.options.play.auto) {
this.play();
}
//从指定图片开始播放
return this.options.callback.loaded(this.options.start);
};
//导航高亮当前图片位置
Plugin.prototype._setActive = function(number) {
var $element,current;
$element = $(this.element);
this.data = $.data(this);
current = number > -1 ? number : this.data.current;
$(".active",$element).removeClass("active");
return $(".slidesjs-pagination li:eq(" + current + ") a",$element).addClass("active");
};
//更新容器尺寸
Plugin.prototype.update = function() {
var $element,height,width;
$element = $(this.element);
this.data = $.data(this);
$(".slidesjs-control",$element).children(":not(:eq(" + this.data.current + "))").css({
display: "none",zIndex: 0
});
width = $element.width();
height = (this.options.height / this.options.width) * width;
this.options.width = width;
this.options.height = height;
return $(".slidesjs-control,.slidesjs-container",$element).css({
width: width,height: height
});
};
Plugin.prototype.next = function(effect) {
var $element;
$element = $(this.element);
this.data = $.data(this);
$.data(this,"direction","next");
if (effect === void 0) {
effect = this.options.navigation.effect;
}
if (effect === "fade") {
return this._fade();
} else {
return this._slide();
}
};
Plugin.prototype.previous = function(effect) {
var $element;
$element = $(this.element);
this.data = $.data(this);
$.data(this,"previous");
if (effect === void 0) {
effect = this.options.navigation.effect;
}
if (effect === "fade") {
return this._fade();
} else {
return this._slide();
}
};
//定位到指定图片 number第几个图片
Plugin.prototype.goto = function(number) {
var $element,effect;
$element = $(this.element);
this.data = $.data(this);
//动画类型
if (effect === void 0) {
effect = this.options.pagination.effect;
}
//查看当前数字是否在合理区间
if (number > this.data.total) {
number = this.data.total;
} else if (number < 1) {
number = 1;
}
if (typeof number === "number") {
//根据不同效果走不同方法
if (effect === "fade") {
return this._fade(number);
} else {
return this._slide(number);
}
} else if (typeof number === "string") {
if (number === "first") {
if (effect === "fade") {
return this._fade(0);
} else {
return this._slide(0);
}
} else if (number === "last") {
if (effect === "fade") {
return this._fade(this.data.total);
} else {
return this._slide(this.data.total);
}
}
}
};
Plugin.prototype._setuptouch = function() {
var $element,next,previous,slidesControl;
$element = $(this.element);
this.data = $.data(this);
slidesControl = $(".slidesjs-control",$element);
next = this.data.current + 1;
previous = this.data.current - 1;
if (previous < 0) {
previous = this.data.total - 1;
}
if (next > this.data.total - 1) {
next = 0;
}
slidesControl.children(":eq(" + next + ")").css({
display: "block",left: this.options.width
});
return slidesControl.children(":eq(" + previous + ")").css({
display: "block",left: -this.options.width
});
};
Plugin.prototype._touchstart = function(e) {
var $element,touches;
$element = $(this.element);
this.data = $.data(this);
touches = e.originalEvent.touches[0];
this._setuptouch();
$.data(this,"touchtimer",Number(new Date()));
$.data(this,"touchstartx",touches.pageX);
$.data(this,"touchstarty",touches.pageY);
return e.stopPropagation();
};
Plugin.prototype._touchend = function(e) {
var $element,duration,prefix,slidesControl,timing,touches,transform,_this = this;
$element = $(this.element);
this.data = $.data(this);
touches = e.originalEvent.touches[0];
slidesControl = $(".slidesjs-control",$element);
if (slidesControl.position().left > this.options.width * 0.5 || slidesControl.position().left > this.options.width * 0.1 && (Number(new Date()) - this.data.touchtimer < 250)) {
$.data(this,"previous");
this._slide();
} else if (slidesControl.position().left < -(this.options.width * 0.5) || slidesControl.position().left < -(this.options.width * 0.1) && (Number(new Date()) - this.data.touchtimer < 250)) {
$.data(this,"next");
this._slide();
} else {
prefix = this.data.vendorPrefix;
transform = prefix + "Transform";
duration = prefix + "TransitionDuration";
timing = prefix + "TransitionTimingFunction";
slidesControl[0].style[transform] = "translateX(0px)";
slidesControl[0].style[duration] = this.options.effect.slide.speed * 0.85 + "ms";
}
slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function() {
prefix = _this.data.vendorPrefix;
transform = prefix + "Transform";
duration = prefix + "TransitionDuration";
timing = prefix + "TransitionTimingFunction";
slidesControl[0].style[transform] = "";
slidesControl[0].style[duration] = "";
return slidesControl[0].style[timing] = "";
});
return e.stopPropagation();
};
Plugin.prototype._touchmove = function(e) {
var $element,transform;
$element = $(this.element);
this.data = $.data(this);
touches = e.originalEvent.touches[0];
prefix = this.data.vendorPrefix;
slidesControl = $(".slidesjs-control",$element);
transform = prefix + "Transform";
$.data(this,"scrolling",Math.abs(touches.pageX - this.data.touchstartx) < Math.abs(touches.pageY - this.data.touchstarty));
if (!this.data.animating && !this.data.scrolling) {
e.preventDefault();
this._setuptouch();
slidesControl[0].style[transform] = "translateX(" + (touches.pageX - this.data.touchstartx) + "px)";
}
return e.stopPropagation();
};
Plugin.prototype.play = function(next) {
var $element,currentSlide,slidesContainer,_this = this;
$element = $(this.element);
this.data = $.data(this);
if (!this.data.playInterval) {
if (next) {
currentSlide = this.data.current;
this.data.direction = "next";
if (this.options.play.effect === "fade") {
this._fade();
} else {
this._slide();
}
}
$.data(this,"playInterval",setInterval((function() {
currentSlide = _this.data.current;
_this.data.direction = "next";
if (_this.options.play.effect === "fade") {
return _this._fade();
} else {
return _this._slide();
}
}),this.options.play.interval));
slidesContainer = $(".slidesjs-container",$element);
if (this.options.play.pauseOnHover) {
slidesContainer.unbind();
slidesContainer.bind("mouseenter",function() {
return _this.stop();
});
slidesContainer.bind("mouseleave",function() {
if (_this.options.play.restartDelay) {
return $.data(_this,"restartDelay",setTimeout((function() {
return _this.play(true);
}),_this.options.play.restartDelay));
} else {
return _this.play();
}
});
}
$.data(this,"playing",true);
$(".slidesjs-play",$element).addClass("slidesjs-playing");
if (this.options.play.swap) {
$(".slidesjs-play",$element).hide();
return $(".slidesjs-stop",$element).show();
}
}
};
Plugin.prototype.stop = function(clicked) {
var $element;
$element = $(this.element);
this.data = $.data(this);
clearInterval(this.data.playInterval);
if (this.options.play.pauseOnHover && clicked) {
$(".slidesjs-container",$element).unbind();
}
$.data(this,null);
$.data(this,false);
$(".slidesjs-play",$element).removeClass("slidesjs-playing");
if (this.options.play.swap) {
$(".slidesjs-stop",$element).hide();
return $(".slidesjs-play",$element).show();
}
};
//number 为图片第几个，不是对应图片下标
Plugin.prototype._slide = function(number) {
var $element,direction,value,_this = this;
$element = $(this.element);
this.data = $.data(this);
//当前没有动画，并且指定的图片不是当前图片
//current为图片下标，从0开始，所以要加1
if (!this.data.animating && number !== this.data.current + 1) {
//当前有动画
$.data(this,true);
//存下当前图片下标
currentSlide = this.data.current;
if (number > -1) {
number = number - 1;
//目标下标于当前图片下标对比
value = number > currentSlide ? 1 : -1;
//目的下标和当前下标比较，得到位移的值：正／负
direction = number > currentSlide ? -this.options.width : this.options.width;
//目标下标
next = number;
} else {
value = this.data.direction === "next" ? 1 : -1;
direction = this.data.direction === "next" ? -this.options.width : this.options.width;
next = currentSlide + value;
}
if (next === -1) {
next = this.data.total - 1;
}
if (next === this.data.total) {
next = 0;
}
//设置导航高亮
this._setActive(next);
slidesControl = $(".slidesjs-control",$element);
//＊＊＊＊＊＊重要的滚动逻辑
if (number > -1) {
//非当前图片隐藏
slidesControl.children(":not(:eq(" + currentSlide + "))").css({
display: "none",zIndex: 0
});
}
//下一个图片显示，并且放到指定位置
slidesControl.children(":eq(" + next + ")").css({
display: "block",left: value * this.options.width,zIndex: 10
});
//＊＊＊＊＊＊重要的滚动逻辑
this.options.callback.start(currentSlide + 1);
//执行动画的地方
if (!this.data.vendorPrefix) {
//css3动画移动
prefix = this.data.vendorPrefix;
transform = prefix + "Transform";
duration = prefix + "TransitionDuration";
timing = prefix + "TransitionTimingFunction";
slidesControl[0].style[transform] = "translateX(" + direction + "px)";
slidesControl[0].style[duration] = 2000 + "ms";
//slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms";
return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function() {
slidesControl[0].style[transform] = "";
slidesControl[0].style[duration] = "";
slidesControl.children(":eq(" + next + ")").css({
left: 0
});
slidesControl.children(":eq(" + currentSlide + ")").css({
display: "none",zIndex: 0
});
$.data(_this,next);
$.data(_this,false);
slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
slidesControl.children(":not(:eq(" + next + "))").css({
display: "none",zIndex: 0
});
if (_this.data.touch) {
_this._setuptouch();
}
return _this.options.callback.complete(next + 1);
});
} else {
//js动画移动
return slidesControl.stop().animate(
{
left: direction
},this.options.effect.slide.speed,(
function() {
slidesControl.css({
left: 0
});
//把目标图片重置位置
slidesControl.children(":eq(" + next + ")").css({
left: 0
});
return slidesControl.children(":eq(" + currentSlide + ")").css(
{
display: "none",zIndex: 0
},//更新当前下标
$.data(_this,next),//更新当前动画标识
$.data(_this,false),_this.options.callback.complete(next + 1)
);
}
)
);
}
}
};
Plugin.prototype._fade = function(number) {
var $element,_this = this;
$element = $(this.element);
this.data = $.data(this);
if (!this.data.animating && number !== this.data.current + 1) {
$.data(this,true);
currentSlide = this.data.current;
if (number) {
number = number - 1;
value = number > currentSlide ? 1 : -1;
next = number;
} else {
value = this.data.direction === "next" ? 1 : -1;
next = currentSlide + value;
}
if (next === -1) {
next = this.data.total - 1;
}
if (next === this.data.total) {
next = 0;
}
this._setActive(next);
slidesControl = $(".slidesjs-control",$element);
slidesControl.children(":eq(" + next + ")").css({
display: "none",zIndex: 10
});
this.options.callback.start(currentSlide + 1);
if (this.options.effect.fade.crossfade) {
slidesControl.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed);
return slidesControl.children(":eq(" + next + ")").stop().fadeIn(this.options.effect.fade.speed,(function() {
slidesControl.children(":eq(" + next + ")").css({
zIndex: 0
});
$.data(_this,false);
$.data(_this,next);
return _this.options.callback.complete(next + 1);
}));
} else {
return slidesControl.children(":eq(" + currentSlide + ")").stop().fadeOut(this.options.effect.fade.speed,(function() {
slidesControl.children(":eq(" + next + ")").stop().fadeIn(_this.options.effect.fade.speed,(function() {
return slidesControl.children(":eq(" + next + ")").css({
zIndex: 10
});
}));
$.data(_this,next);
return _this.options.callback.complete(next + 1);
}));
}
}
};
//检测当前浏览器类型
Plugin.prototype._getVendorPrefix = function() {
var body,i,style,transition,vendor;
body = document.body || document.documentElement;
style = body.style;
transition = "transition";
vendor = ["Moz","Webkit","Khtml","O","ms"];
transition = transition.charAt(0).toUpperCase() + transition.substr(1);
i = 0;
while (i < vendor.length) {
if (typeof style[vendor[i] + transition] === "string") {
return vendor[i];
}
i++;
}
return false;
};
return $.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this,"plugin_" + pluginName)) {
return $.data(this,"plugin_" + pluginName,new Plugin(this,options));
}
});
};
})(jQuery,document);
}).call(this);
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
