微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery – Infinity滑块上一个按钮逻辑不起作用

我正在尝试使用jQuery创建一个无限滑块.
活动幻灯片将是屏幕的2/3,即将到来的幻灯片将是1/3.所以你已经看到了下一张幻灯片的预览.

我构建的滑块正在工作.当您单击下一步时,滑块将在左侧动画.

诀窍

在初始化时,我在最后一张幻灯片后复制了前两张幻灯片.当关注当前索引的slideIndex是幻灯片数减1时,它会将滑块重置为零.所以你有一个无限滑块.

问题

当我在第一张幻灯片上并且之前单击时我也想要应用效果时出现问题.它基本上应该这样做,但不能将滑块重置为零,而是重置幻灯片的末尾.

var slider = $('.slider');
var slides = slider.find('.slides').children();
var slidesW = slides.width();

root.offset = -Math.abs((root.slideIndex * slides.eq(index).width()));
console.log(root.offset);

// Update active class
slides.removeClass('active');
// slides.eq(index).addClass('active');

// Add class active
TweenMax.to(slides.eq(index),1,{
    className: 'active',onComplete: function() {

        if (root.slideIndex >= (root.numOfSlides - 2)) {

            slider.find('.slides').addClass('no-transition');

            slides.removeClass('active');
            slides.filter(':first').addClass('active');

            root.offset = 0;

            TweenMax.set(slider.find('.slides'),{
                x: root.offset,onComplete: function() {
                    root.slideIndex = 0;
                    $('#footer .paging #indicator').find('span').html('01');

                    return false;
                }
            });

        } 
    }
});

// Remove no-transition class
slider.find('.slides').removeClass('no-transition');

// Change position of ul.slides
TweenMax.to(slider.find('.slides'),0.4,{
    x: root.offset
});

因为我有一个if语句if(root.slideIndex ===(root.numOfSlides – 2)){它总是会重置为零,当slideIndex等于root.numOfSlides – 2.所以它无所谓单击上一个或下一个,当slideIndex在幻灯片4的示例中时,它将重置为零.

我在codepen中重新创建了滑块:https://codepen.io/anon/pen/zEmozr

解决方法

改变这一行:

if (dir == "ss-prev") {
    // root.slideIndex--;
    root.slideIndex = (root.slideIndex - 1 < 0) ? root.numOfSlides - 1 : root.slideIndex - 1;
    console.log('prev',root.slideIndex);
}

通过:

if (dir == "ss-prev") {
    // root.slideIndex--;
    root.slideIndex = (root.slideIndex - 1 < 0) ? root.numOfSlides - 3 : root.slideIndex - 1;
    console.log('prev',root.slideIndex);
}

https://codepen.io/anon/pen/xXBMZJ?editors=1111

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐