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