4
我已經編寫了一個面向對象的JavaScript自定義滑塊，如下所示。我在這裏把模塊放在了小提琴https://jsfiddle.net/5z29xhzg/7/。在向左或向右滑動之後，幻燈片被克隆並相應地添加，以便用戶可以像想要的那樣循環滑動。有一個單獨的功能用於控制活動選項卡。當單獨使用時，標籤和滑塊完美地工作，但當兩者結合使用時，我遇到了問題。例如，點擊「藍色圍裙」，然後點擊左邊的幻燈片按鈕（它應該帶你到達'012ave穿梭者的幻燈片），你可以進入幸福幻燈片。或者使用標籤點擊上一張幻燈片，然後點擊下一個按鈕不會顯示任何內容。有人能指出我寫下的對象中的缺陷嗎？任何幫助深表感謝！自定義滑塊問題
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對，對不起。我將更加清楚 – JordanBarber
@RachelGallen滑塊中的圖像都是外部來源，因此您應該能夠看到所有這些圖像。我在這一個https://jsfiddle.net/5z29xhzg/7/中刪除了無關的'logo'圖片。有四個導航鏈接，所以我不知道爲什麼你只會看到兩個。 – JordanBarber