幻灯片放映全部一次

Question

我正在用jQuery制作幻灯片。

下面是代码：

$(function() { 
 
    var slides = $(".slide-img"); 
 
    slides.eq(0).fadeIn(600); // initialize first slide 
 
    $(".btn-container button:eq(0)").addClass('active'); // add active class to button 
 
    $(".btn-container button").click(function() { 
 
    $(".btn-container button").removeClass('active'); 
 
    $(this).addClass('active'); 
 
    var imgCode = $(this).attr('data-slide'); 
 
    $(".slide-container img").fadeOut(600); 
 
    $(".slide-container img").eq(imgCode).delay(600).fadeIn(600); 
 
    var title = $(".slide-container img").eq(imgCode).attr('data-title'); 
 
    $(".slide-container .title .text").hide().text(title).delay(500).fadeIn(800); 
 
    }); 
 
    var timeout = function() { 
 
    $(".btn-container button").stop().each(function() { 
 
     $(this).click(); 
 
    }).stop(); 
 
    } 
 
    window.setInterval(timeout, 3000); 
 

 

 
});

<div class="wrapper"> 
 
    <div class="slide-container container"> 
 
    <div class="slide"> 
 
     <img src="http://static2.businessinsider.com/image/4e15d75ccadcbb1349070000/ukraine-may-face-8-billion-in-losses-from-hosting-a-soccer-tournament.jpg" class="slide-img" data-title="GOAL!" /> 
 
     <img src="http://static6.businessinsider.com/image/4cf64ef84bd7c8ae78160000/italian-soccer-serie-a-italy.jpg" class="slide-img" data-title="Italian Soccer" /> 
 
     <img src="http://static5.businessinsider.com/image/4dc7f45249e2ae2a272a0000/there-are-only-7-people-who-make-1000000-playing-soccer-in-mls.jpg" class="slide-img" data-title="Landon Donovan" /> 
 
     <span class="title"><span class="text">GOAL!</span></span> 
 
    </div> 
 
    </div> 
 
    <div class="btn-container container"> 
 
    <button class="control" data-slide="0">&bull;</button> 
 
    <button class="control" data-slide="1">&bull;</button> 
 
    <button class="control" data-slide="2">&bull;</button> 
 
    </div> 
 
</div>

这应该更改与setInterval()显示的图像。但是，所有的图像同时出现会发生什么。我该如何让他们淡入淡出？

Answer 1

你的代码没有工作，因为你没有选择你想触发哪个按钮。从你原来的代码，它会同时触发第二和第三。

于是，我改变你的js到下面的代码，看看我的Fiddle：

var imgCode = 0;//to track which buttons is currently activated. 
var slides = $(".slide-img"); 
slides.eq(0).fadeIn(600); // initialize first slide 
$(".btn-container button:eq(0)").addClass('active'); // add active class to button 

$(".btn-container button").click(function(){ 
    $(".btn-container button").removeClass('active'); 
    $(this).addClass('active'); 
    var imgCode = $(this).attr('data-slide'); 
    $(".slide-container img").fadeOut(600); 
    $(".slide-container img").eq(imgCode).delay(600).fadeIn(600); 
    var title = $(".slide-container img").eq(imgCode).attr('data-title'); 
    $(".slide-container .title .text").hide().text(title).delay(500).fadeIn(800); 
}); 
var timeout = function(){ 
    $(".btn-container button").each(function(index){ 
     if(imgCode + 1 == index){ 
      imgCode = imgCode + 1; 
      //reset the imgCode so it will loop 
      if(imgCode == $(".slide-img").length - 1){ 
       imgCode = -1; 
      } 
      $(this).trigger("click"); 
      return false; 
     } 
    }); 
} 

window.setInterval(timeout, 3000); 

Answer 2

你需要知道从哪里开始，然后下一个兄弟必须被点击。 http://jsfiddle.net/5jd9pbsd/7/

var timeout = function() { 
    $(".btn-container button.active").next().click(); 
} 

Answer 3

你应该使用一些CSS！

$(function() { 
 
    var slides = $(".slide-img"); 
 
    slides.eq(0).fadeIn(600); // initialize first slide 
 
    $(".btn-container button:eq(0)").addClass('active'); // add active class to button 
 
    $(".btn-container button").click(function() { 
 
    $(".btn-container button").removeClass('active'); 
 
    $(this).addClass('active'); 
 
    var imgCode = $(this).attr('data-slide'); 
 
    $(".slide-container img").fadeOut(600); 
 
    $(".slide-container img").eq(imgCode).delay(600).fadeIn(600); 
 
    var title = $(".slide-container img").eq(imgCode).attr('data-title'); 
 
    $(".slide-container .title .text").hide().text(title).delay(500).fadeIn(800); 
 
    }); 
 
    var timeout = function() { 
 
    $(".btn-container button").stop().each(function() { 
 
     $(this).click(); 
 
    }).stop(); 
 
    } 
 
    window.setInterval(timeout, 3000); 
 
});

.slide-img { 
 
    position: absolute; 
 
    z-index: 0; 
 
} 
 
.active { 
 
    z-index: 1; 
 
} 
 
.moretext { 
 
    position: absolute; 
 
    left: 450px; 
 
    top: 50px 
 
} 
 

 
.btn-container { 
 
    position:absolute; 
 
    left: 450px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="slide-container container"> 
 
    <div class="slide"> 
 
     <img src="http://static2.businessinsider.com/image/4e15d75ccadcbb1349070000/ukraine-may-face-8-billion-in-losses-from-hosting-a-soccer-tournament.jpg" class="slide-img" data-title="GOAL!" style="display: none" /> 
 
     <img src="http://static6.businessinsider.com/image/4cf64ef84bd7c8ae78160000/italian-soccer-serie-a-italy.jpg" class="slide-img" data-title="Italian Soccer" style="display: none" /> 
 
     <img src="http://static5.businessinsider.com/image/4dc7f45249e2ae2a272a0000/there-are-only-7-people-who-make-1000000-playing-soccer-in-mls.jpg" class="slide-img" data-title="Landon Donovan" style="display: none" /> 
 
     <div class="moretext"> 
 
     <span class="title"><span class="text">GOAL!</span></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="btn-container container"> 
 
    <button class="control" data-slide="0">&bull;</button> 
 
    <button class="control" data-slide="1">&bull;</button> 
 
    <button class="control" data-slide="2">&bull;</button> 
 
    </div> 
 
</div>