javascript - 如何使幻灯片自动播放并更改交换以在 JavaScript 中淡入淡出

Question

大家好我是 JavaScript 新手 我这里有一个图像 slider 我希望图像 slider 自动播放并将交换更改为淡入淡出影响。我该如何更改？

我当前的 JavaScript 代码如下

$('#banner .banner-bg').each(function() {

    var self = $(this),
      images = self.find('.banner-bg-item');

    // SET BG IMAGES
    images.each(function() {
      var img = $(this).find('img');
      if (img.length > 0) {
        $(this).css('background-image', 'url(' + img.attr('src') + ')');
        img.hide();
      }
    });

    // INIT SLIDER
    if ($.fn.owlCarousel) {
      self.owlCarousel({
        slideSpeed: 500,
        pagination: true,
        navigation: true,
        paginationSpeed: 200,
        singleItem: true,
        autoPlay:true,
        animateIn: 'fadeIn',
        navigationText: [
          "<i class='fa fa-angle-left'></i>",
          "<i class='fa fa-angle-right'></i>"
          ],
        addClassActive: true,
        afterMove: function() {
          // ACTIVATE TAB
          var active_index = self.find('.owl-item.active').index();
          $('.banner-search-inner .tab-title:eq(' + active_index + ')').trigger('click');
        }
      });
    }

    // SET DEFAULT IF NEEDED
    var active_tab_index = $('.banner-bg-item.active, .banner-search-inner .tab-title.active').index();
    if (active_tab_index !== 0) {
      self.trigger('owl.jumpTo', active_tab_index);
    }

  });

  $('.banner-search-inner').each(function() {

    var self = $(this),
      tabs = self.find('.tab-title'),
      contents = self.find('.tab-content');

    // TAB CLICK
    tabs.click(function() {
      if (!$(this).hasClass('active')) {
        var index = $(this).index();
        tabs.filter('.active').removeClass('active');
        $(this).addClass('active');
        contents.filter('.active').hide().removeClass('active');
        contents.filter(':eq(' + index + ')').fadeToggle().addClass('active');

        // CHANGE BG
        if ($.fn.owlCarousel) {
          $('#banner .banner-bg').trigger('owl.goTo', index);
        }

      }
    });

  });

下面是HTML代码

<div class="banner-bg">
  <div class="banner-bg-item active"><img src="img/banner-bg-1.jpg" alt="" class="img-responsive"></div>
  <div class="banner-bg-item"><img src="img/banner-bg-2.jpg" alt="" class="img-responsive"></div>
</div>

Answer 1

您可以为此使用 CSS animation 并使用 javascript 在幻灯片之间切换。我为您编写了这段代码，您可以使用播放、停止、下一个和上一个按钮进行导航。如果您喜欢幻灯片中的图片，可以在 slide div 中使用 img 标签。

var slideIn = 0;

function prev() {

	   var slide = document.querySelectorAll('.slide'), 
	   	   prevSlide = (typeof slide[slideIn-1] !== 'undefined')? slideIn-1 : slide.length-1;
	  
	  if (slide[prevSlide] && slide[slideIn]){
	  	slide[slideIn].className = 'slide out';
	  	slide[prevSlide].className = 'slide in';
	  	slideIn = prevSlide;
	  }
}

function next() {

   var slide = document.querySelectorAll('.slide'), 
   	   nextSlide = (typeof slide[slideIn+1] !== 'undefined')? slideIn+1 : 0;
  
  if (slide[nextSlide] && slide[slideIn]){
  	slide[slideIn].className = 'slide out';
  	slide[nextSlide].className = 'slide in';
  	slideIn = nextSlide;
  }
}

var playInterval,
	PlayTimer = 1000; // 1 second

function play() {
	next();
	playInterval = setTimeout(play,PlayTimer);
}

function stop() {
    clearTimeout(playInterval);
}

body {
  padding: 0;
  margin: 0;
  font-family: tahoma;
  font-size: 8pt;
  color: black;
}
div {
  height: 30px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}
div>div {
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.in {
  -webkit-animation: comein 1s 1;
  -moz-animation: comein 1s 1;
  animation: comein 1s 1;
  animation-fill-mode: both;
}
@keyframes comein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.out {
  -webkit-animation: goout 1s 1;
  -moz-animation: goout 1s 1;
  animation: goout 1s 1;
  animation-fill-mode: both;
}
@keyframes goout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div>
  <div class="slide in">1st Slide content</div>
  <div class="slide">2nd Slide content</div>
  <div class="slide">3rd Slide content</div>
  <div class="slide">4th Slide content</div>
</div>

<button onclick="prev();">Prev</button>
<button onclick="next();">Next</button>
<button onclick="play();">Play</button>
<button onclick="stop();">Stop</button>