【问题标题】:Move my slider thumbnails as new slide comes into view在新幻灯片出现时移动我的滑块缩略图
【发布时间】:2023-12-31 06:17:01
【问题描述】:

脚本:jQuery 循环滑块:http://jquery.malsup.com/cycle/

在下一张幻灯片出现之前,我正在使用以下代码将我的滑块缩略图容器向左移动“130px”。当到达最后一张幻灯片时,边距将重置为“0px”。这很好用,但是容器直到第三张幻灯片才会移动。

这是我正在使用的代码:

function onBefore(currElement, nextElement, opts, isFoward) {
    var currentslide = opts.currSlide + 1; 
    if(currentslide == opts.slideCount) {
        jQuery(".slider-nav").animate({marginLeft: '0'});
    } else if(currentslide > 1 && currentslide != opts.slideCount) {
        jQuery(".slider-nav").animate({marginLeft: '-=133'});
    }           
}

一旦第二张幻灯片出现,我怎样才能让它移动。注意:将上面代码中的“>1”替换为“>0”会在页面加载后立即移动容器。

【问题讨论】:

    标签: javascript jquery slider cycle jquery-cycle


    【解决方案1】:

    我不确定调用此函数的上下文。但我认为你想要以下代码:

    function onBefore(currElement, nextElement, opts, isFoward) {
          if(opts.currSlide == opts.slideCount) {
             jQuery(".slider-nav").animate({marginLeft: '0'});
         } else { 
             jQuery(".slider-nav").animate({marginLeft: '-=133'});
         }
    }
    

    如果这不起作用,可能是因为您的第一张幻灯片是 (slideCount = 0) 而不是 (slideCount = 1)。如果是这样,请将 IF 测试更改为:

          if(opts.currSlide == (opts.slideCount - 1)) {
    

    问候 尼尔

    【讨论】: