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

大家好，我是JavaScript新手，我这里有一个图像滑块，我希望图像滑块自动播放，并将交换更改为淡入效果。我怎样才能改变这个

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

      }
    });

  });

$（'#banner.banner bg'）。每个（函数（）{
var self=$（此），
images=self.find（“.banner bg item”）；
//设置背景图像
images.each（函数（）{
var img=$（this.find（'img'）；
如果（img.length>0）{
$（this.css（'background-image'，'url（'+img.attr（'src'）+'））；
img.hide（）；
}
});
//初始滑块
如果（$.fn.owlCarousel）{
自动旋转木马({
幻灯片速度：500，
分页：正确，
导航：对，
分页速度：200，
单项：对，
自动播放：对，
animateIn:“fadeIn”，
导航文本：[
"",
""
],
addClassActive:对，
后移：函数（）{
//激活选项卡
var active_index=self.find（'.owl item.active'）.index（）；
$（'.banner搜索内部。选项卡标题：eq（'+active_index+'））。触发器（'click'）；
}
});
}
//如果需要，设置默认值
var active_tab_index=$（'.banner-bg-item.active，.banner搜索内部.tab title.active'）.index（）；
如果（活动选项卡索引！==0）{
自身触发器（'owl.jumpTo'，活动选项卡索引）；
}
});
$（'.banner搜索内部'）。每个（函数（）{
var self=$（此），
tabs=self.find（“.tab title”），
contents=self.find（“.tab内容”）；
//选项卡单击
选项卡。单击（函数（）{
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'）；
//更改背景
如果（$.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

动画

，并使用javascript在幻灯片之间切换。我为您编写了这段代码，您可以使用play、stop、next和prev按钮进行导航。如果您喜欢幻灯片中的图像，可以在幻灯片中使用

img

tag

var slideIn=0；
函数prev（）{
var slide=document.queryselectoral（'.slide'），
prevSlide=（幻灯片类型[slideIn-1]！==“未定义”）？slideIn-1:slide.length-1；
如果（幻灯片[prevSlide]&幻灯片[slideIn]）{
幻灯片[slideIn]。类名='slide out'；
幻灯片[prevSlide]。类名='slide-in'；
slideIn=prevside；
}
}
函数next（）{
var slide=document.queryselectoral（'.slide'），
nextSlide=（幻灯片类型[slideIn+1]！='undefined'）？slideIn+1:0；
如果（幻灯片[nextSlide]&幻灯片[slideIn]）{
幻灯片[slideIn]。类名='slide out'；
幻灯片[nextSlide]。类名='slide-in'；
slideIn=nextSlide；
}
}
var播放间隔，
播放计时器=1000；//1秒
函数播放（）{
next（）；
播放间隔=设置超时（播放，播放计时器）；
}
函数停止（）{
clearTimeout（播放间隔）；
}

正文{
填充：0；
保证金：0；
字体系列：tahoma；
字号：8pt；
颜色：黑色；
}
div{
高度：30px；
宽度：100%；
位置：相对位置；
溢出：隐藏；
边缘底部：10px；
}
div>div{
不透明度：0；
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
}
.在{
-webkit动画：Comein1s1；
-moz动画：Comein1s1；
动画：Comein1s1；
动画填充模式：两者都有；
}
@关键帧出现了{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
.出去{
-webkit动画：goout1s1；
-moz动画：goout1s1；
动画：古特1s1；
动画填充模式：两者都有；
}
@关键帧goout{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}

第一张幻灯片内容
第二张幻灯片内容
第三张幻灯片内容
第四张幻灯片内容
上
下一个
玩
停止

你能创建一个工作小提琴吗？@MehulMohan fiddle？