簡體   English   中英

創建滑動圖像庫

[英]Creating a sliding image gallery

我一直在看一些使用jQuery和JS以及HTML和CSS創建滑動圖像庫的代碼。 我碰到了這篇文章,並復制了帶有“修訂”代碼的代碼。 但是,圖庫僅顯示第一張圖像。 下一個和上一個單擊不執行任何操作。 我開始學習一些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

任何幫助將是巨大的! 謝謝

編輯我遇到了這個問題,並注意到代碼對腳本有兩個src。 我添加了ui腳本,jQuery完美運行!

缺少幻燈片庫,請添加此庫以使其正常工作:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM