回顾一个动画功能，同时制作一个jQuery图像库的问题。下一个/上一个按钮 [英] Issues recalling an animation function whilst making a jQuery image gallery. Next/Previous buttons
问题描述
这是我在Stack Overflow的第一篇文章，因为我过去一天已经在这个问题上撕掉了我的头发。
新的jQuery，并有一个基本的了解如何工作，但我真的很难与获取一个函数回到自己处理后。这是一个简单的if / else函数，它运行一系列五个图像，看看它们是否可见。
如果图片是可见的（换句话说，图库中的当前图片），则下一个和上一个按钮将控制哪个图像接近褪色，
我有下一个/上一个链接工作的第一个图像，但我不能让它工作，一旦第二个图像褪色。我猜这是因为我需要回忆起脚本，以检查是否/ else的图像是可见的。我的问题是，我不知道在哪里放置代码。我试过在各个地方的代码，我一直在研究jQuery延迟和回调，看看我是否可以尝试和工作，是否是时间不工作等。但我只是不能工作它！
如果任何人可以帮助得到这个工作，或甚至建议一个更简单的创建这个，我不知道，我会非常感激！
图片只是列在div中：
< div class =images>
< img class =image gallery-imgid =1src =/ images / 01.jpg/>
< img class =image gallery-imgid =2src =/ images / 02.jpg/>
< img class =image gallery-imgid =3src =/ images / 03.jpg/>
< img class =image gallery-imgid =4src =/ images / 04.jpg/>
< img class =image gallery-imgid =5src =/ images / 05.jpg/>
< / div>
< div class =gallery-controls>
< a class =gallery-buttonid =previoushref =＃previous>上一页< / a>
< a class =gallery-buttonid =nexthref =＃next>下一页< / a>
< / div>
jQuery是：
window.addEventListener（'DOMContentLoaded'，function（）{
function galleryLoop（）{
if（$（'div.images img ：nth-child（1）'）。css（{'display'：'inline'}））{
//＃NEXT CLICK
$（'a.gallery- 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（）{
$ .images img：nth-child（3）'）。fadeIn（）;
}）; // END FADE OUT
}）; // END #NEXT CLICK
//＃上一个CLICK
$（'a.gallery-button＃previous'）。bind（'click'，function（）{
$（'div.images img：nth-child（2）'）。fadeOut（'100'，function（）{
$（'div.images img：first-child'）。fadeIn b $ b}）; // END FADE OUT
}）; // END #PREVIOUS CLICK
}; // END IF
};
galleryLoop（）;
}）; // END SCRIPT
解决方案确定我花了很多时间，所以我希望它解决你的问题！
这里是链接到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（）>上一页< / a>
< button onclick =next（）>下一页< / a>
< / div>
然后确保您的图片先隐藏在CSS中：
.gallery-img {
display：none;
}
this is my first ever post to Stack Overflow and it's because I've been tearing my hair out over this issue for the past day.
I'm pretty new to jQuery and have a basic understanding of how things work but I'm really struggling with getting a function to loop back on itself after it has processed. It's a simple if/else function that runs through a series of five images to see if they are visible or not.
If an image is visible (in other words, the current image in a gallery) then the next and previous buttons will control which image is next to be faded in and subsequently fade out the previous image.
I have the Next/Previous links working for the first image but I can't get it to work once the second image has faded in. I'm guessing it's because I need to recall the script for it to check if/else the images are visible. My problem is that I don't know where to place the code. I've tried the code in various places and I've been researching into jQuery delays and callbacks to see if I can try and work out whether it's the timings not working etc. But I just can't work it out!
If anyone can help get this working or even suggest a simpler way of creating this that I don't know, I would be greatly appreciative!
The images are simply listed within a 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>And the jQuery is:
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();});//END SCRIPT
解决方案Ok I spent a lot of time on this so I hope it solves your problem!
Here is the link to the JSFiddle: http://jsfiddle.net/ekUvj/22/
What you want to do is change you javascript to this:
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; }And then make sure your buttons call the functions:
<div class="gallery-controls"> <button onclick="prev()">Previous</a> <button onclick="next()">Next</a> </div>Then make sure your sure your images are hidden at first in the CSS:
.gallery-img { display: none; }
这篇关于回顾一个动画功能，同时制作一个jQuery图像库的问题。下一个/上一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
