Question

我创建了幻灯片。对于幻灯片放映透视图，我正在尝试一些上一个和下一个按钮，但我无法使它们工作。

以下是我正在使用的代码：

$(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();
});

Here是一个jsfiddle。

感谢您的帮助。

Answer 1

这些代码应放入html中，以便jQuery可以通过ID获取这些元素：

<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
});

希望它有所帮助。

如何使前一个和下一个按钮正常工作

1 个答案: