这是我第一次在 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();
});//结束脚本