自动播放与指示器

<style>
#sl2 { max-width: 420px; margin: 20px auto; }
#sl2 .vp { overflow: hidden; border-radius: 12px; position: relative; }
#sl2 .track { display: flex; transition: transform .45s ease; }
#sl2 .slide { min-width: 100%; height: 170px; display: flex; align-items: center;
              justify-content: center; color: #fff; font-size: 22px; font-weight: 700; }
#sl2 .s1 { background: linear-gradient(135deg,#d2a8ff,#4a9eff); }
#sl2 .s2 { background: linear-gradient(135deg,#57ab5a,#39c5cf); }
#sl2 .s3 { background: linear-gradient(135deg,#e78a3e,#f778ba); }
#sl2 .dots { display: flex; gap: 8px; justify-content: center; padding: 12px 0; }
#sl2 .dots button { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #d2a8ff;
                    background: transparent; cursor: pointer; padding: 0; transition: .2s; }
#sl2 .dots button.on { background: #d2a8ff; transform: scale(1.25); }
</style>
<div id="sl2">
  <div class="vp"><div class="track">
    <div class="slide s1">自动播放中</div>
    <div class="slide s2">悬停会暂停</div>
    <div class="slide s3">圆点可点击</div>
  </div></div>
  <div class="dots"><button></button><button></button><button></button></div>
</div>
<script>
var sl = document.getElementById('sl2');
var track = sl.querySelector('.track'), dots = sl.querySelectorAll('.dots button');
var n = track.children.length, i = 0, timer = null;
function go(k) {
  i = (k + n) % n;
  track.style.transform = 'translateX(' + (-i * 100) + '%)';
  dots.forEach(function (d, di) { d.classList.toggle('on', di === i); });
}
function play() { stop(); timer = setInterval(function () { go(i + 1); }, 2500); }
function stop() { if (timer) clearInterval(timer); }
dots.forEach(function (d, di) { d.addEventListener('click', function () { go(di); play(); }); });
sl.addEventListener('mouseenter', stop);
sl.addEventListener('mouseleave', play);
go(0); play();
</script>