3

スライドショーを作成しました。スライドショーの観点から、前と次のボタンをいくつか試していますが、それらを機能させることができません。

以下は私が使用しているコードです：

$(function(){              
    $.fn.showBig = function(){
        $(this).click(function(){
            var getURL = $(this).data('url');
            var navControls = '<div id="nav-controls">';
                navControls += '<span id="nav-prev">&lt;</span>';
                navControls += '<span id="nav-next">&gt;</span>';
                navControls += '</div>';

            $('<div id="darkbg"/>').css({'opacity':'0.5'}).appendTo('body');
            $('<div id="popup"/>').css({'opacity':'0'}).appendTo('body');
            $('<div id="image-wrap">').html('<img src =' + getURL +'>').appendTo('#popup');
            $('<span id="close"/>').text('X').appendTo('#popup');
            $(navControls).appendTo('#popup');

            var imageTarget = $('#image-wrap img'),
                maxHeight = $(window).height(),
                countHeight = imageTarget.height(),
                countWidth = imageTarget.width(),
                countTop = imageTarget.height()/2,
                countLeft = imageTarget.width()/2;

            if (imageTarget.length){        

                $('#image-wrap').css({'height':countHeight+'px', 'width':countWidth+'px', 'max-height':maxHeight+'px'});
                $('#popup').css({'margin-left':'-'+countLeft+'px', 'margin-top':'-'+countTop+'px'}).animate({'opacity':'1', 'height':countHeight+'px', 'width':countWidth+'px', 'max-height':maxHeight+'px'})

                }
                if(imageTarget.attr('src') == ''){                      
                    $('#image-wrap').css({'height':'300px', 'width':'400px', 'max-height':maxHeight+'px'});
                    $('#popup').css({'margin-left':'-200px', 'margin-top':'-150px', 'height':'300px', 'width':'400px'}).animate({'opacity':'1', 'height':'300px', 'width':'400px', 'max-height':maxHeight+'px'});
                    $('#nav-controls').hide();
                    var notFound = '<span class="not-found">';
                        notFound += '<strong>not found :(</strong><br>you may check the image path.';
                        notFound += '</span>';

                        $('#image-wrap').html(notFound);
                    }

            $('#close').closeBig(); 

            return false;
        });

    }

    $.fn.closeBig = function(){
        $(this).on('click', function(){
            $('#darkbg, #popup, #close').fadeOut(removeall);

            function removeall(){
                    $(this).remove()
                }
            return false;
        });
    }

    $('#gallery-list li a').showBig();
});

ここにjsfiddleがあります。

助けてくれてありがとう。

4

1 に答える 1

0

これらのコードは、jQuery が ID によってこれらの要素を取得できるように、html に配置する必要があります。

<div id="nav-controls">
<span id="nav-prev">&lt;</span>
<span id="nav-next">&gt;</span>
</div>

次に、これらのボタンのクリック イベント リスナーを追加します。

$( "#nav-prev" ).click(function() {
// your codes here
});

$( "#nav-next" ).click(function() {
// your codes here
});

お役に立てば幸いです。

于 2014-07-07T15:46:22.410 に答える