如何使幻灯片自动播放并更改交换以淡入JavaScript [英] How make slide to auto play and change swap to fade in JavaScript

问题描述

大家好，我是JavaScript新手，在这里有一个图像滑块，我希望图像滑块自动播放，然后将交换更改为淡入影响.我该如何更改?

Hi guys I am new in JavaScript I have a image slider here I want the Image Slider to auto play and change swap to fade effect. How can I change this?

我当前的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>

推荐答案

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

You can use CSS animation for that and switch between the slides with javascript. I wrote this code for you and you can use play, stop, next and prev button to navigate. You can use img tag inside slide div if you like image inside your slide.

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>

这篇关于如何使幻灯片自动播放并更改交换以淡入JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！