我正在使用以下插件：
有问题的文件是unslider.js
当最后一张幻灯片结束时，脚本将返回到第一张幻灯片，但它的速度非常快。我是JS的新手，所以不知道如何在回到第一张幻灯片时放慢脚本的速度。因此，当它显示它时，它从1 - 2 - 3 - 4开始，但是当它从4 - 3 - 2 - 1快速反转时，有任何想法吗？
这些是我一直在玩的选项，但没有运气：
// Set some options
_.o = {
speed: 800, // animation speed, false for no transition (integer or boolean)
delay: 5000, // delay between slides, false for no autoplay (integer or boolean)
init: 0, // init delay, false for no delay (integer or boolean)
pause: !f, // pause on hover (boolean)
loop: !f, // infinitely looping (boolean)
keys: true, // keyboard shortcuts (boolean)
dots: true, // display ••••o• pagination (boolean)
arrows: true, // display prev/next arrows (boolean)
prev: '', // text or html inside prev button (string)
next: '', // same as for prev option
fluid: true, // is it a percentage width? (boolean)
complete: f, // invoke after animation (function with argument)
items: '>ul', // slides container selector
item: '>li' // slidable items selector
};
我认为这可能是相关的，但不确定该怎么做：
// To slide or not to slide
if ((!target.length || index < 0) && o.loop == f) return;
// Check if it's out of bounds
if (!target.length) index = 0;
if (index < 0) index = li.length - 1;
target = li.eq(index);
var speed = callback ? 5 : o.speed | 0,
obj = {height: target.outerHeight()};
if (!ul.queue('fx').length) {
// Handle those pesky dots
el.find('.dot').eq(index).addClass('active').siblings().removeClass('active');
el.animate(obj, speed) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) {
_.i = index;
$.isFunction(o.complete) && !callback && o.complete(el);
});
};
};
在上面的一行中，我尝试过玩这个：var speed = callback？ 5：o.speed | 0，
我尝试添加不同的数字来代替5，但它没有成功。
请指教。谢谢！
答案 0 :(得分：2)
你可以尝试设置一个新的速度值，只有当它超出界限时才添加一个布尔变量，如果是真的那么就改变这样的速度值
// Check if it's out of bounds
var reversespeed=false;//default to false
if (!target.length){
index = 0;
reversespeed=true;//go to first li
}
if (index < 0){
index = li.length - 1;
reversespeed=true;//go to last li
}
target = li.eq(index);
var speed = callback ? 5 : o.speed | 0,
obj = {height: target.outerHeight()};
if(reversespeed){
speed=50000;//add new speed for reverse
}
if (!ul.queue('fx').length) {
// Handle those pesky dots
el.find('.dot').eq(index).addClass('active').siblings().removeClass('active');
el.animate(obj, speed) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) {
_.i = index;
$.isFunction(o.complete) && !callback && o.complete(el);
});
};
http://jsfiddle.net/cqRFK/
UPDATE
如果没有它显示之前的幻灯片，当它超出范围时，立即返回到0，
// Check if it's out of bounds
var reversespeed=false;//default to false
if (!target.length){
index = 0;
reversespeed=true;//go to first li
}
if (index < 0){
index = li.length - 1;
reversespeed=true;//go to last li
}
target = li.eq(index);
var speed = callback ? 5 : o.speed | 0,
obj = {height: target.outerHeight()};
if(reversespeed){
speed=0;
}
if (!ul.queue('fx').length) {
// Handle those pesky dots
el.find('.dot').eq(index).addClass('active').siblings().removeClass('active');
el.animate(obj, speed) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) {
_.i = index;
$.isFunction(o.complete) && !callback && o.complete(el);
});
};
http://jsfiddle.net/cqRFK/1
要使滑动事件生效，您需要包含jquery.event.swipe.js并更改
if($.event.swipe) {
this.el.on('swipeleft', _.prev).on('swiperight', _.next);
}
在Unslider.js上
if($.event.special.swipe) {
this.el.on('swipeleft', _.prev).on('swiperight', _.next);
}
答案 1 :(得分：1)
我建议从头开始写自己的，但我已经做了：
http://jsfiddle.net/Hive7/agG2b/
这是我使用的jquery：
$(document).ready(function () {
$(".slide_button_left").click(function () {
if ($("li.slideshow1").css("margin-left") === "-1010px") {
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_1").css("background", "red");
}
if ($("li.slideshow1").css("margin-left") === "-1515px") {
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_2").css("background", "red");
}
if ($("li.slideshow1").css("margin-left") === "-2020px") {
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_3").css("background", "red");
}
if ($("li.slideshow1").css("margin-left") === "-505px") {
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_4").css("background", "red");
}
if ($("li.slideshow1").css("margin-left") === "-1010px") {
$("li.slideshow1").animate({
'margin-left': "-505px"
}, 300);
}
if ($("li.slideshow1").css("margin-left") === "-1515px") {
$("li.slideshow1").animate({
'margin-left': "-1010px"
}, 300);
}
if ($("li.slideshow1").css("margin-left") === "-2020px") {
$("li.slideshow").css("margin-left")
$("li.slideshow1").animate({
'margin-left': "-1515px"
}, 300);
}
if ($("li.slideshow1").css("margin-left") === "-505px") {
$("li.slideshow1").animate({
'margin-left': "5px"
}, 300, function(){
$("li.slideshow1").stop().animate('margin-left', "5px");
if($("li.slideshow1").css("margin-left") === "5px"){
$("li.slideshow1").css("margin-left", "-2020px")
}
});
}
});
$(".slide_button_right").click(function () {
if ($("li.slideshow1").css("margin-left") === "-1010px") {
$("li.slideshow1").animate({
'margin-left': "-1515px"
}, 300);
if($("li.slideshow1").css("margin-left") === "-1010px"){
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_3").css("background", "red");
}
}
if ($("li.slideshow1").css("margin-left") === "-1515px") {
$("li.slideshow1").animate({
'margin-left': "-2020px"
}, 300);
if($("li.slideshow1").css("margin-left") === "-1515px"){
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_4").css("background", "red");
}
}
if ($("li.slideshow1").css("margin-left") === "-505px") {
$("li.slideshow1").animate({
'margin-left': "-1010px"
}, 300);
if($("li.slideshow1").css("margin-left") === "-505px"){
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_2").css("background", "red");
}
}
if ($("li.slideshow1").css("margin-left") === "-2020px") {
if($("li.slideshow1").css("margin-left") === "-2020px"){
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "red");
}
$("li.slideshow1").animate({
'margin-left': "-2520px"
}, 300, function(){
$("li.slideshow1").stop().animate('margin-left', "-2520px");
if($("li.slideshow1").css("margin-left") === "-2520px"){
$("li.slideshow1").css("margin-left", "-505px")
}
});
}
});
$("a.slidebutton_1").click(function () {
if ($("li.slideshow1").css("margin-left") === "-1010px") {
$("li.slideshow1").animate({
'margin-left': "-505px"
}, 300);
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_1").css("background", "red");
}
if ($("li.slideshow1").css("margin-left") === "-1515px") {
$("li.slideshow1").animate({
'margin-left': "-505px"
}, 380);
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_1").css("background", "red");
}
if ($("li.slideshow1").css("margin-left") === "-2020px") {
$("li.slideshow1").animate({
'margin-left': "-505px"
}, 460);
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_1").css("background", "red");
}
});
$("a.slidebutton_2").click(function () {
if ($("li.slideshow1").css("margin-left") === "-505px") {
$("li.slideshow1").animate({
'margin-left': "-1010px"
}, 300);
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_2").css("background", "red");
}
if ($("li.slideshow1").css("margin-left") === "-1515px") {
$("li.slideshow1").animate({
'margin-left': "-1010px"
}, 300);
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_2").css("background", "red");
}
if ($("li.slideshow1").css("margin-left") === "-2020px") {
$("li.slideshow1").animate({
'margin-left': "-1010px"
}, 380);
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_2").css("background", "red");
}
});
$("a.slidebutton_3").click(function () {
if ($("li.slideshow1").css("margin-left") === "-505px") {
$("li.slideshow1").animate({
'margin-left': "-1515px"
}, 380);
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_3").css("background", "red");
}
if ($("li.slideshow1").css("margin-left") === "-1010px") {
$("li.slideshow1").animate({
'margin-left': "-1515px"
}, 300);
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_3").css("background", "red");
}
if ($("li.slideshow1").css("margin-left") === "-2020px") {
$("li.slideshow1").animate({
'margin-left': "-1515px"
}, 300);
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_3").css("background", "red");
}
});
$("a.slidebutton_4").click(function () {
if ($("li.slideshow1").css("margin-left") === "-505px") {
$("li.slideshow1").animate({
'margin-left': "-2020px"
}, 460);
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_4").css("background", "red");
}
if ($("li.slideshow1").css("margin-left") === "-1010px") {
$("li.slideshow1").animate({
'margin-left': "-2020px"
}, 380);
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_4").css("background", "red");
}
if ($("li.slideshow1").css("margin-left") === "-1515px") {
$("li.slideshow1").animate({
'margin-left': "-2020px"
}, 300);
$("a#slide_buttons").css("background", "none");
$("a.slidebutton_1").css("background", "none");
$("a.slidebutton_4").css("background", "red");
}
});
$(".slide_button_right").mouseover(function () {
$("a.slide_button_right").css("background-color", "#000");
$("a.slide_button_right").css("background-size", "60px 54px");
$("a.slide_button_right").css("background-position", "-30px 0px");
});
$(".slide_button_right").mouseout(function () {
$("a.slide_button_right").css("background-color", "#fff");
$("a.slide_button_right").css("background-size", "60px 54px");
$("a.slide_button_right").css("background-position", "0px 0px");
});
$(".slide_button_left").mouseover(function () {
$("a.slide_button_left").css("background-color", "#000");
$("a.slide_button_left").css("background-size", "60px 54px");
$("a.slide_button_left").css("background-position", "-30px 0px");
});
$(".slide_button_left").mouseout(function () {
$("a.slide_button_left").css("background-color", "#fff");
$("a.slide_button_left").css("background-size", "60px 54px");
$("a.slide_button_left").css("background-position", "0px 0px");
});
});
添加：
<script>
if($('ul').css('left') === '300%') {
$('ul').animate({'left' : '0%'}, 5000)
}
</script>
要更改所需的时间，请将5000号码更改为您想要的号码