Come rendere scorrevole la riproduzione automatica e cambiare lo swap in dissolvenza in JavaScript

Ciao ragazzi Sono nuovo in JavaScript Ho uno slider dell’immagine qui Voglio che l’Image Slider giochi automaticamente e cambi l’effetto swap in dissolvenza . Come posso cambiare questo?

Il mio codice JavaScript attuale è qui sotto

$('#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: [ "", "" ], 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); } } }); }); 

Sotto è il codice HTML

  

Puoi usare l’ animation CSS per questo e passare tra le diapositive con javascript. Ho scritto questo codice per te e puoi usare play, stop, next e prev per navigare. Puoi usare il tag img all’interno di slide div se ti piace l’immagine all’interno della diapositiva.

 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; } } 
 
1st Slide content
2nd Slide content
3rd Slide content
4th Slide content