jquery - jQuery FadeOut FadeIn

jquery - jQuery FadeOut FadeIn,第1张

我正在搞乱html,css和jquery,而且我已经解决了这个问题。 我有一个幻灯片,可以从容器中使用fadeIn和fadeOut获取图像,但是当我按下“下一步”时,它会重置页面并在底部的某处加载下一个图像。 你能告诉我这个问题是什么吗?

HTML

<div class="slideshow ">
<div class="container">
<div class="slides">
<img class ="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
<img class ="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
<img class ="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg">
<img  class="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW">
</div>
</div>



<div class="container ">
<ul class="slider-dots">
<a href="#/" class="arrow-prev"><<</a>
    <li class="dot active-dot">&bull;</li>
    <li class="dot">&bull;</li>
    <li class="dot">&bull;</li>
    <li class="dot">&bull;</li>
<a href="#/" class="arrow-next">>></a>
</ul>
</div>
</div>

jquery的

var main=function(){
$('.arrow-next').click(function(event){
    event.stopPropagation();
    var currentSlide=$('.active-slide');
    var nextSlide=$('.active-slide').next();

    var currentDot=$('.active-dot');
    var nextDot=currentDot.next();

    if(nextSlide.length==0) {nextDot=$('.dot').first(); nextSlide=$('.slide').first();}

    currentSlide.fadeOut().removeClass('active-slide');
    nextSlide.fadeIn().addClass('active-slide');

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');


}); 

$('.arrow-prev').click(function(event){
    event.stopPropagation();
    var currentSlide=$('.active-slide');
    var prevSlide=currentSlide.prev();

    var currentDot=$('.active-dot');
    var prevDot=currentDot.prev();

if(prevSlide.length==0) {prevDot=$('.dot').last(); prevSlide=$('.slide').last();}

    currentSlide.fadeOut().removeClass('active-slide');
    prevSlide.fadeIn().addClass('active-slide');

    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');

}); 

};

(文档)$。就绪(主);

你可以在这里看到这一切        fiddle http://jsfiddle.net/1zLd58yo/

最佳答案:

2 个答案:

答案 0 :(得分:0)

看起来你有一个fadeOut然后是fadeIn。 淡出后,图像消失,然后出现新图像。 淡出后有重复/发生。

应用以下css规则来解决您的问题。

在div.slides上,    - 设置固定的宽度和高度    - 将位置设置为相对

在图像上    - 设置位置=绝对

答案 1 :(得分:0)

将div幻灯片设置为特定高度然后在fadeOut之后添加将fadeIn放入函数中,这将确保高度不会变得太大。这样你就可以避免将位置设置为绝对位置。

currentSlide.fadeOut().removeClass('active-slide', function(){
    prevSlide.fadeIn().addClass('active-slide');
});

第一张幻灯片将完全淡出然后下一张幻灯片将淡入。

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复