javascript - How to slide a banner using jquery?

var slideIndex = 1;
function plusSlides(n) {
    showSlides(slideIndex += n);
}
function currentSlide(n) {
    showSlides(slideIndex = n);
}
function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    //dots[slideIndex-1].className += " active";
}

showSlides(slideIndex);
setInterval(function() {
    plusSlides(1);
}, 300);Copy code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div >
  <a href="">
    <div >
      <img src="https://dummyimage.com/100x100/000/fff&text=1">
    </div>
  </a>
  <a href="">
    <div >
      <img src="https://dummyimage.com/100x100/000/fff&text=2">
    </div>
  </a>
  <a href="">
    <div >
      <img src="https://dummyimage.com/100x100/000/fff&text=3">
    </div>
  </a>
  <br/>
  <a onclick="plusSlides(-1)">&#10094;</a>
  <a onclick="plusSlides(1)">&#10095;</a>
</div>Copy code

!(function() {

  const slideshow = EL => {
  
    const ELS_prevNext = EL.querySelectorAll('.prev, .next');
    const ELS_slide = EL.querySelectorAll('.slide');
    const t = ELS_slide.length;
    let c = 0;
    let itv = null;
    
    const slide = () => {
      c = c<0 ? t-1 : c%t;
      ELS_slide.forEach(EL => EL.classList.remove('is-active'));
      ELS_slide[c].classList.add('is-active');
    };
    
    const play = () => itv = setInterval(() => {++c, slide()}, 3000);
    const stop = () => clearInterval(itv);
    
    ELS_prevNext.forEach(EL => EL.addEventListener('click', ev => {
      ev.preventDefault();
      c = (ev.currentTarget.classList.contains('next') ? ++c : --c);
      slide();
    }));
    
    EL.addEventListener('mouseenter', stop);
    EL.addEventListener('mouseleave', play);
    play(); // Start slideshow!!!
  };
  
  document.querySelectorAll('.slideshow').forEach(slideshow);
  
}());Copy code

* {
  margin: 0;
  box-sizing: border-box;
}

.slideshow {
  position: relative;
  width: 100%;
  height: 250px;
}

.slideshow .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s, visibility 0.4s;
  visibility: hidden;
  opacity: 0;
}

.slideshow .slide.is-active {
  visibility: visible;
  opacity: 1;
}

.slideshow .slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideshow .prev,
.slideshow .next {
  cursor: pointer;
  user-select: none;
  position: absolute;
  font-size: 5em;
  color: #fff;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.slideshow .prev {
  right: auto;
}Copy code

<h2>SLIDESHOW AUTOPLAY AND PAUSE ON HOVER</h2>

<div >
 <a href="#!">
  <div >
   <img src="//placehold.it/800x600/0bf?text=1">
  </div>
 </a>
 <a href="#!">
  <div >
   <img src="//placehold.it/800x600/f0b?text=2">
  </div>
 </a>
 <a href="#!">
  <div >
   <img src="//placehold.it/800x600/bf0?text=3">
  </div>
 </a>
 <a >&#10094;</a>
 <a >&#10095;</a>
</div>

<h2>AS MANY SLIDESHOWS AS YOU WANT</h2>

<div >
 <a href="#!">
  <div >
   <img src="//placehold.it/800x600/fb0?text=A">
  </div>
 </a>
 <a href="#!">
  <div >
   <img src="//placehold.it/800x600/0fb?text=B">
  </div>
 </a>
 <a href="#!">
  <div >
   <img src="//placehold.it/800x600/b0f?text=C">
  </div>
 </a>
 <a >&#10094;</a>
 <a >&#10095;</a>
</div>Copy code