幻灯片一下子全部播放

Question

我正在使用jQuery制作幻灯片。

以下是代码：

＆＃13;

＆＃13;

$(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);


});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这应该改变用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！

＆＃13;

＆＃13;

$(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);
});

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;