我在我的项目中使用Hero Slider,我想定义一个函数,比如gotoSlideN(n)
转到第 n 张幻灯片。
var gotoSlideN = function (n) {
$(".cd-hero-slider .selected").removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
$(".cd-hero-slider .selected").removeClass('is-moving');
});
var selectedPosition = n,
activePosition = $('.cd-hero-slider .selected').index();
if (activePosition < selectedPosition) {
$(".cd-hero-slider").children('li').eq(n).addClass('selected from-left').nextAll().addClass('move-left');
} else {
$(".cd-hero-slider").children('li').eq(n).addClass('selected from-left').prevAll().addClass('move-right');
}
};
上面的代码有效,但是当我尝试查看以前的幻灯片时出现了一些问题。例如,当我调用gotoSlideN(3)
时,当所选幻灯片为 4 号时,第 4 张幻灯片隐藏,但第 3 张幻灯片不显示。
gotoSlideN(5); //working
gotoSlideN(4); //working
gotoSlideN(5); //not working truly