伙计们！我成功了。
花了几个小时。
最初重新创建的问题是here
如下所述，我的工作解决方案是here。
我找到了该循环效果的开关。
AND我将其设置为新的option ==> looping (true/false) !!!
如果looping 选项设置为false...它不会循环。
defaults = {
width: 940,
height: 528,
start: 1,
navigation: {
active: true,
effect: "slide"
},
pagination: {
active: true,
effect: "slide"
},
play: {
active: false,
effect: "slide",
interval: 5000,
auto: false,
swap: true,
pauseOnHover: false,
restartDelay: 2500
},
effect: {
slide: {
speed: 500
},
fade: {
speed: 300,
crossfade: true
}
},
callback: {
loaded: function() {},
start: function() {},
complete: function() {}
},
looping: false // Looping effect from last image to first and vice-versa
};
我稍微修改了 Plugin.prototype._slide 函数来实现这一点。
我添加了一个基于 var 的新条件，我称之为 OK_Proceed。
这个变量默认是true。
尝试转到图像索引 -1 或 data.total 时，其值变为 false...但仅当循环选项设置为 false 时。
我希望保留原来的功能...
;)
var OK_Proceed=true; // ADDED var
console.log( this.options.looping );
if (next === -1) {
if( this.options.looping ){
next = this.data.total - 1;
}else{
OK_Proceed=false;
}
}
if (next === this.data.total) {
if( this.options.looping ){
next = 0;
}else{
OK_Proceed=false;
}
}
当 OK_Proceed 为 false 时：脚本完全绕过动画函数。
它被一个 10 像素的小“反弹”效果所取代。
剩下要做的就是重置data.animating的值：
$.data(_this, "animating", false);
所以这里是完整的功能：
Plugin.prototype._slide = function(number) { console.log("Line 430 - _slide: ");
var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value,
_this = this;
$element = $(this.element);
this.data = $.data(this); console.log( JSON.stringify( $.data(this) ) );
if (!this.data.animating && number !== this.data.current + 1) {
$.data(this, "animating", true);
currentSlide = this.data.current; console.log("Line 437 - currentSlide: "+currentSlide);
if (number > -1) {
number = number - 1;
value = number > currentSlide ? 1 : -1; console.log("Line 440 - value: "+value);
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; console.log("Line 446 - next: "+next);
} var OK_Proceed=true; // ADDED var
console.log( this.options.looping );
if (next === -1) {
if( this.options.looping ){
next = this.data.total - 1;
}else{
OK_Proceed=false;
}
}
if (next === this.data.total) {
if( this.options.looping ){
next = 0;
}else{
OK_Proceed=false;
}
}
if(OK_Proceed){this._setActive(next); // ADDED condition
slidesControl = $(".slidesjs-control", $element);
if (number > -1) {
slidesControl.children(":not(:eq(" + currentSlide + "))").css({
display: "none",
left: 0,
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) {
prefix = this.data.vendorPrefix;
transform = prefix + "Transform";
duration = prefix + "TransitionDuration";
timing = prefix + "TransitionTimingFunction";
slidesControl[0].style[transform] = "translateX(" + direction + "px)";
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",
left: 0,
zIndex: 0
});
$.data(_this, "current", next);
$.data(_this, "animating", false);
slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
slidesControl.children(":not(:eq(" + next + "))").css({
display: "none",
left: 0,
zIndex: 0
});
if (_this.data.touch) {
_this._setuptouch();
}
return _this.options.callback.complete(next + 1);
});
} else {
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",
left: 0,
zIndex: 0
}, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1));
}));
} } else {
console.log("HERE");
$.data(_this, "animating", false);
console.log( JSON.stringify( $.data(this) ) );
// Bouncing effect
$(".slidesjs-control").stop().animate( { "left" : "-=10px" }, 100, "easeInOutBounce", function(){
$(".slidesjs-control").animate( { "left" : "+=10px" }, 100, "easeInOutBounce");
});
} // End added condition
}
};
我从所有 console.logs 中清除了这段代码并创建了一个zip file ready to use。
编辑后的第二天
为了使“触摸”的行为与鼠标单击的链接相同，还有另外两个函数需要修改……上面的 .zip 文件也反映了这些更改……
为点击修改的函数是：_slide.
修改为点击的函数有：_setuptouch和_touchmove。
您可以修改两个类：bounceForward 和 bounceBackward。
lastest demo is here。在支持触控的设备上试一试。