【发布时间】：2016-09-11 10:58:18
【问题描述】：
我用面向对象的 javascript 编写了一个自定义滑块，如下所示。我在https://jsfiddle.net/5z29xhzg/7/ 的小提琴中包含了该模块。在向左或向右滑动后，幻灯片会被克隆并相应地附加，以便用户可以根据需要循环浏览滑块。有一个单独的函数用于控制活动选项卡。当单独使用时，标签和滑块可以完美地工作，但是当两者结合使用时我遇到了问题。例如，单击“蓝色围裙”，然后单击左侧幻灯片按钮（应将您带到“dave & busters”幻灯片）将您带到幸福幻灯片。或者使用选项卡单击最后一张幻灯片，然后单击下一步按钮不会显示任何内容。有人可以指出我写的对象中的缺陷吗？非常感谢任何帮助！
GiftSlider = {
prev: '.slider-container .prev',
next: '.slider-container .next',
slide: '.slide',
slidesContainer: '#slides',
navLink: '.gift-nav li a',
init: function() {
// Initialize nextSlide function when clicking right arrow
$(this.next).click(this.nextSlide.bind(this));
$(this.next).click(this.activeTabs.bind(this));
// Initialize prevSlide function when clicking left arrow
$(this.prev).click(this.prevSlide.bind(this));
$(this.prev).click(this.activeTabs.bind(this));
// Initialize toggleSlides and activeTab functions when clicking nav links
$(this.navLink).click(this.toggleSlides.bind(this));
$(this.navLink).click(this.activeTabs.bind(this));
},
nextSlide: function(e) {
// Prevent default anchor click
e.preventDefault();
// Set the current slide
var currentSlide = $('.slide.current');
// Set the next slide
var nextSlide = $('.slide.current').next();
// remove the current class from the current slide
currentSlide.removeClass("current");
// Move the current slide to the end so we can cycle through
currentSlide.clone().appendTo(this.slidesContainer);
// remove the last slide so there is not two instances
currentSlide.remove();
// Add current class to next slide to display it
nextSlide.addClass("current");
},
prevSlide: function(e) {
// Prevent defaulct anchor click
e.preventDefault();
// Set the current slide
var currentSlide = $('.slide.current');
// Set the last slide
var lastSlide = $('.slide').last();
// remove the current class from the current slide
currentSlide.removeClass("current");
// Move the last slide to the beginning so we can cycle through
lastSlide.clone().prependTo(this.slidesContainer);
// remove the last slide so there is not two instances
lastSlide.remove();
// Add current class to new first slide
$('.slide').first().addClass("current");
},
toggleSlides: function(e) {
// Prevent defaulct anchor click
e.preventDefault();
var itemData = e.currentTarget.dataset.index;
var currentSlide = $('.slide.current');
currentSlide.removeClass("current");
newSlide = $('#slide-' + itemData);
// currentSlide.clone().appendTo(this.slidesContainer);
newSlide.addClass("current");
// console.log(newSlide);
},
activeTabs: function() {
// *** This could be much simpler if we didnt need to match the slider buttons
// *** up with nav tabs. Because I need to track the slider as well, I have
// *** made this its own function to be used in both instances
// get the active slide
var activeSlide = $('.slide').filter(':visible');
// get the active slide's id
var currentId = activeSlide.attr('id');
// grab just the number from the active slide's id
var currentNum = currentId.slice(-1);
// remove any active gift-nav links
$(this.navLink).removeClass("active");
// get the current tab by matching it to the current slide's id
var currentTab = $('.gift-nav li a[data-index="' + currentNum + '"]');
// make that active
currentTab.addClass("active");
}
}
$(document).ready(function(){
// Init our objects
GiftSlider.init();
});
【问题讨论】：
-
小提琴不是很清楚，因为缺少一些图像？并且有各种图片，但顶部只出现了 2 个链接。无论如何，从我的使用情况来看...您能否更新链接并添加评论。预期的行为？
-
@RachelGallen 是的，很抱歉。我会说得更清楚
-
@RachelGallen 滑块中的图像都是外部来源，因此您应该能够看到所有这些图像。我删除了jsfiddle.net/5z29xhzg/7 中不相关的“徽标”图像。有四个导航链接，所以我不知道为什么你只会看到两个。
-
盛大。我实际上在火车上，即将换乘另一辆火车，在去我姐姐吃饭的途中。以后得看。如果有人在此期间提供帮助，那就更好了！我建议在实际问题中更新小提琴链接。
-
@RachelGallen 听起来不错，谢谢！
标签： javascript jquery html slider clone