0

这是我第一次在 Stack Overflow 上发帖，这是因为过去一天我一直在为这个问题烦恼。

我对 jQuery 很陌生，并且对事物的工作方式有基本的了解，但我真的很难让一个函数在处理后自行循环。这是一个简单的 if/else 函数，它通过一系列五个图像来查看它们是否可见。

如果图像可见（换句话说，画廊中的当前图像），则下一个和上一个按钮将控制下一个要淡入的图像，然后淡出上一个图像。

我有适用于第一张图像的下一个/上一个链接，但是一旦第二张图像淡入，我就无法让它工作。我猜这是因为我需要调用脚本来检查是否/否则图像可见。我的问题是我不知道在哪里放置代码。我已经在各个地方尝试过代码，并且一直在研究 jQuery 延迟和回调，看看我是否可以尝试确定它是否是时间不起作用等等。但我就是无法解决！

如果有人可以帮助完成这项工作，甚至提出一种我不知道的更简单的创建方法，我将不胜感激！

图像只是在一个 div 中列出：

<div class="images">
    <img class="image gallery-img" id="1" src="/images/01.jpg" />
    <img class="image gallery-img" id="2" src="/images/02.jpg" />
    <img class="image gallery-img" id="3" src="/images/03.jpg" />
    <img class="image gallery-img" id="4" src="/images/04.jpg" />
    <img class="image gallery-img" id="5" src="/images/05.jpg" />
</div>

<div class="gallery-controls">
    <a class="gallery-button" id="previous" href="#previous">Previous</a>
    <a class="gallery-button" id="next" href="#next">Next</a>
</div>

jQuery是：

window.addEventListener( 'DOMContentLoaded', function(){

function galleryLoop(){

        if( $('div.images img:nth-child(1)').css({ 'display' : 'inline' }) ){

            //#NEXT CLICK
            $('a.gallery-button#next').bind('click', function(){
                $('div.images img:nth-child(1)').fadeOut( '100' , function(){ 
                    $('div.images img:nth-child(2)').fadeIn();
                });//END FADE OUT
            }); //END #NEXT CLICK

            //#PREVIOUS CLICK
            $('a.gallery-button#previous').bind('click', function(){
                $('div.images img:nth-child(1)').fadeOut( '100' , function(){ 
                    $('div.images img:nth-child(5)').fadeIn();
                });//END FADE OUT
            }); //END #PREVIOUS CLICK

        } //END IF

        else if( $('div.images img:nth-child(2)').css({ 'display' : 'inline' }) ){

            //#NEXT CLICK
            $('a.gallery-button#next').bind('click', function(){
                $('div.images img:nth-child(2)').fadeOut( '100' , function(){ 
                    $('div.images img:nth-child(3)').fadeIn();
                });//END FADE OUT
            }); //END #NEXT CLICK

            //#PREVIOUS CLICK
            $('a.gallery-button#previous').bind('click', function(){
                $('div.images img:nth-child(2)').fadeOut( '100' , function(){ 
                    $('div.images img:first-child').fadeIn();
                });//END FADE OUT
            }); //END #PREVIOUS CLICK

        }; //END IF

    };

galleryLoop();

});//结束脚本

4

2 回答 2

0

从事件监听器中取出函数，你就可以随时调用它。

于 2012-06-12T19:16:06.667 回答
0

好的，我花了很多时间，所以我希望它能解决你的问题！

这是 JSFiddle 的链接：http: //jsfiddle.net/ekUvj/22/

您想要做的是将您的 javascript 更改为：

var imgNum = 1;
$("#1").fadeIn(300);


function prev () {
    newImageNum=(imgNum == 1)?5:imgNum-1;
    $("#".concat(imgNum)).fadeOut(300, function () {$("#".concat(newImageNum)).fadeIn(300);});
    imgNum = newImageNum;
}

function next () {
    newImageNum=(imgNum == 5)?1:imgNum+1;
    $("#".concat(imgNum)).fadeOut(300, function () {$("#".concat(newImageNum)).fadeIn(300);});
    imgNum = newImageNum;
}​

然后确保你的按钮调用函数：

<div class="gallery-controls">
    <button onclick="prev()">Previous</a>
    <button onclick="next()">Next</a>
</div>​

然后确保你的图像首先隐藏在 CSS 中：

.gallery-img {
    display: none;
}​
于 2012-06-12T19:50:10.553 回答