我正在使用此幻灯片显示项目，我需要知道是否可以恢复其间隔。你可以看到，这里发生了什么，当你悬停/鼠标悬停时，进度条（底部的绿色部分）停止。当您删除/ mouseout时，它会继续。这里的问题是整个间隔（8000毫秒）重新开始。我想弄清楚的是：我怎样才能让它继续下去，而不是从0到8秒开始？如果你check it out here
JavaScript / jQuery：
;
(function ($) {
$.fn.slider = function (o) {
var defaults = {
animation_duration: 700,
animation_interval: 8000,
touch_draglimit: 80
}
// states
var state = {
slide_length: 0,
slide_current: 1,
slide_next: 0,
index_current: 1,
index_next: 0,
interval: null,
paused: false,
resizing: false,
doTransition: false,
clickEvent: "click"
}
if (Modernizr) {
Modernizr.csstransitions ? doTransition = true : doTransition = false;
Modernizr.touch ? clickEvent = "touchstart" : clickEvent = "click";
}
var settings = $.extend({}, defaults, o);
// create namespace
var slider = {};
// set reference to slider element
var el = this;
// the clones
var clone_first,
clone_last;
// responsive stuff
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
sliderWidth = el.width();
/*
* Internal functions
* * */
// initiate slider
var init = function () {
setup();
update_proportions();
start_slider();
i_interact();
};
var setup = function () {
// wrap the slider
el.wrap('<div class="as-wrap"><div class="as-view"></div></div>');
// set namespace
slider.view = el.parent();
slider.wrap = slider.view.parent();
// mark slider list
slider.slider = $("> ul", el);
slider.slider.addClass("as-slider").attr("data-current-slide", state.slide_current).attr("data-current-index", state.index_current);
state.slide_length = slider.slider.children("li").length;
// add progress bar
slider.wrap.append('<div class="as-progress"><div class="as-progress-value"></div></div>');
slider.progress = slider.wrap.find(".as-progress-value");
// add marker
slider.wrap.append('<ol class="as-markers"/>');
$.each(slider.slider.children("li"), function (key, slide) {
var slide_num = key + 1,
goToSlide = key + 1,
marker = $('<li class="as-mark"><a href="#" data-slide="' + slide_num + '"><span>•</span></a></li>');
goToSlide = key + 2;
if (slide_num === state.slide_current) marker.addClass("active");
// bind click
marker.on(clickEvent, "a", function (e) {
e.preventDefault();
progress_reset();
state.paused = false;
if (state.slide_current !== goToSlide) doSlide(false, goToSlide);
});
marker.appendTo($(".as-markers", slider.wrap));
});
slider.markers = $(".as-markers > li", slider.wrap)
// We need to clone the first and last slide to get a better slide effect.
clone_first = $("> li", slider.slider).eq(0).clone();
clone_last = $("> li", slider.slider).eq(state.slide_length - 1).clone();
clone_first.attr({
"data-clone": "last",
"data-slide": 0
}).appendTo(slider.slider);
clone_last.attr({
"data-clone": "first",
"data-slide": 0
}).prependTo(slider.slider);
slider.item = slider.slider.children("li");
slider.item.addClass("as-item");
// update slider length
state.slide_length = slider.item.length;
// add navigation
slider.wrap.append('<div class="as-nav"><a href="#" class="dir-prev" data-dir="prev"><span><</span></a><a href="#" class="dir-next" data-dir="next"><span>></span></a></div>');
// set namepace for navigation
slider.nav = slider.wrap.find(".as-nav");
slider.nav_prev = slider.nav.find(".dir-prev");
slider.nav_next = slider.nav.find(".dir-next");
};
var start_slider = function () {
progress_start();
// slider is now loaded!
slider.wrap.show(0, function () {
slider.wrap.addClass("loaded");
})
};
/* RESIZE
We dont want to spam the resize trigger,
this waits unitl the resize is stopped,
wait 200 ms and then trigger what to do
*/
var resizeTimer = 0;
var resizeWindow = function () {
var windowWidthNew = $(window).width(),
windowHeightNew = $(window).height(),
sliderWidthNew = el.width();
if (windowWidth !== windowWidthNew || windowHeight !== windowHeightNew) {
// set new dimentions
windowWidth = windowWidthNew;
windowHeight = windowHeightNew;
sliderWidth = sliderWidthNew;
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(resizeStop, 50);
resizeStart();
}
};
var resizeStart = function () {
state.paused = true;
state.resizing = true;
if (state.resizing) {
slider.progress.stop();
slider.slider.addClass("no-transition");
}
};
var resizeStop = function () {
update_proportions();
if (state.resizing) {
state.resizing = false;
state.paused = false;
progress_reset();
//doSlide(false, state.slide_current)
slider.slider.removeClass("no-transition");
}
};
/* // RESIZE */
var progress_reset = function () {
slider.progress.stop().css("width", "0%");
progress_stop();
};
var progress_stop = function () {
if (!state.paused) {
clearInterval(state.interval);
progress_start();
} else {
setTimeout(function () {
if (!state.paused) {
clearInterval(state.interval);
progress_start();
}
}, settings.animation_duration);
}
};
var progress_start = function () {
slider.progress.animate({
"width": "100%"
}, settings.animation_interval);
state.interval = setInterval(function () {
doSlide("next", false);
}, settings.animation_interval);
};
var update_proportions = function () {
sliderWidth = slider.wrap.width();
// set slider width
slider.slider.css({
"width": sliderWidth * (state.slide_length),
"left": -sliderWidth * state.slide_current
});
// set slide width
$(".as-item").css({
"width": sliderWidth
});
};
var i_interact = function () {
// Bind resize
$(window).bind("resize", resizeWindow);
// Hover wrap
var progressValue = $(".as-progress-value", slider.wrap).width();
slider.wrap
.on("mouseenter", function () {
if (!state.paused) {
state.paused = true;
slider.wrap.addClass("hovering");
clearInterval(state.interval);
slider.progress.stop();
}
})
.on("mouseleave", function () {
if (state.paused) {
state.paused = false;
var progressWidth = (progressValue / sliderWidth) * 100;
progress_start(progressWidth);
slider.wrap.removeClass("hovering");
}
});
// Hover markers
slider.markers.parent()
.on("mouseenter", function () {
slider.wrap.addClass("hovering-marker");
})
.on("mouseleave", function () {
slider.wrap.removeClass("hovering-marker");
});
// Clicks
slider.nav_prev.on(clickEvent, function (e) {
e.preventDefault();
slider.progress.stop();
state.paused = false;
doSlide("prev", false)
});
slider.nav_next.on(clickEvent, function (e) {
e.preventDefault();
slider.progress.stop();
state.paused = false;
doSlide("next", false);
});
$(".as-stop", slider.wrap).on(clickEvent, function (e) {
e.preventDefault();
slider.progress.stop()
clearInterval(state.interval);
});
// Touch events
var dragging = false,
drag_start,
drag_dist = 0;
slider.slider.on("touchstart", function (e) {
e.preventDefault();
var touch = e.originalEvent.touches[0];
drag_start = touch.pageX;
dragging = true;
})
slider.slider.on("touchmove", function (e) {
var touch = e.originalEvent.touches[0];
drag_dist = touch.pageX - drag_start;
});
slider.slider.on("touchend", function (e) {
if (dragging && (drag_dist > settings.touch_draglimit || drag_dist < -settings.touch_draglimit)) {
e.preventDefault();
clearInterval(state.interval);
slider.progress.stop();
dragging = false;
doSlide((drag_dist > 0) ? "prev" : "next", false);
}
});
// bind pause and stop btn
$(document).keydown(function (e) {
// bind space key
if (e.keyCode === 32) {
if (slider.wrap.hasClass("stopped")) {
slider.wrap.removeClass("stopped");
progress_reset();
} else {
slider.wrap.addClass("stopped");
clearInterval(state.interval);
slider.progress.stop();
}
return false;
}
});
};
var doSlide = function (dir, pos) {
if (!state.paused) {
state.paused = true;
if (pos) {
state.slide_next = pos;
state.index_next = pos - 1;
} else {
slide_next(dir);
}
// update marker position
var marker_index = state.index_next - 1;
if (marker_index === state.slide_length - 2) {
marker_index = 0;
} else if (marker_index === -1) {
marker_index = state.slide_length - 3;
}
slider.markers.removeClass("active").eq(marker_index).addClass("active");
// is modern browser?
if (doTransition) {
slider.slider.css({
"left": -state.index_next * sliderWidth
})
setTimeout(function () {
slide_move();
}, settings.animation_duration * 1.5);
slider.slider.removeClass("no-transition");
} else {
slider.slider.stop(false, false).animate({
"left": -state.index_next * sliderWidth
}, settings.animation_duration, function () {
slide_move();
});
}
}
state.paused = false;
};
var slide_move = function () {
state.slide_current = state.slide_next;
state.index_current = state.index_next;
// check if last or first clone
if (slider.item.eq(state.index_current).attr("data-clone") === "last") {
slider.slider.addClass("no-transition");
slider.slider.css({
"left": -sliderWidth
});
state.slide_current = 2;
state.index_current = 1;
} else if (slider.item.eq(state.index_current).attr("data-clone") === "first") {
slider.slider.addClass("no-transition");
slider.slider.css({
"left": -sliderWidth * (state.slide_length - 2)
});
state.slide_current = state.slide_length - 1;
state.index_current = state.slide_length - 2;
}
progress_reset();
state.paused = false;
slider.slider.attr("data-current-slide", state.slide_current).attr("data-current-index", state.index_current);
}
var slide_next = function (dir) {
if (dir === "next") {
if (slider.item.eq(state.index_current).next().length) {
state.index_next = state.index_current + 1;
state.slide_next = state.slide_current + 1;
} else {
state.index_next = 0;
state.slide_next = 1;
}
} else {
if (slider.item.eq(state.index_current).prev().length) {
state.index_next = state.index_current - 1;
state.slide_next = state.slide_current - 1;
} else {
state.index_next = state.slide_length - 1;
state.slide_next = state.slide_length;
}
}
};
init();
};
})(jQuery);
$(".my-slider").slider();
我真的需要帮助！非常感谢！
答案 0 :(得分：0)
我曾使用此方法一次暂停和恢复计时器how do I pause and resume a timer?
完美无缺。希望它会帮助你:)）
var Clock = {
totalSeconds: 0,
start: function () {
var self = this;
this.interval = setInterval(function () {
self.totalSeconds += 1;
$("#hour").text(Math.floor(self.totalSeconds / 3600));
$("#min").text(Math.floor(self.totalSeconds / 60 % 60));
$("#sec").text(parseInt(self.totalSeconds % 60));
}, 1000);
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
if (!this.interval) this.start();
}
};
Clock.start();
$('#pauseButton').click(function () { Clock.pause(); });
$('#resumeButton').click(function () { Clock.resume(); });