創建滑動圖像庫

我一直在尋找一些代碼，使用jQuery和JS以及HTML和CSS創建滑動圖像庫。我遇到了這個post並複製了代碼與「修訂」的代碼。但是，畫廊只顯示第一張圖片。下一個和prev點擊不會做任何事情。我開始學習一些JS和jQuery。我已經查看了一段時間的代碼，我無法弄清楚是什麼問題。創建滑動圖像庫

這裏是我使用的腳本：

$(document).ready(function(){ 
    $('.slider > #1').show('fade',500).addClass('current'); 
    $('.next').click(function(event){ 
     event.preventDefault(); 

     $('.previous').removeClass('previous'); 

     $('.current').removeClass('current').addClass('previous'); 
     $('.previous').hide("slide",{direction: 'left'}, 500); 

     var previousId = parseInt($('.previous').attr('id')); 

     $('#'+(previousId+1)).show("slide", {direction: 'right'}, 500).addClass('current'); 

    }); 

    $('.prev').click(function(event){ 
     event.preventDefault(); 
     $('.previous').removeClass('previous'); 

     $('.current').removeClass('current').addClass('previous'); 
     $('.previous').hide("slide",{direction: 'right'}, 500); 

     var previousId = parseInt($('.previous').attr('id')); 
     var Id = parseInt($('.current').attr('id')); 


     $('#'+(previousId-1)).show("slide", {direction: 'left'}, 500).addClass('current'); 
    }); 
});

我上傳到jfiddle。

任何幫助將是偉大的！謝謝

編輯我來到this並注意到代碼有兩個腳本的src。我添加了UI腳本和jQuery完美的作品！

來源

2013-09-23 Clocker

所以......你不需要任何幫助嗎？把你的解決方案放在答案中，這樣可以解決這個問題。 – isherwood

感謝您的提醒。 – Clocker

在幻燈片中缺少的庫，添加此爲它工作：

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

來源

2013-09-25 21:57:11 Clocker

創建滑動圖像庫

回答

相關問題