Bagaimana untuk menulis imej karusel javascript js

Pelaksanaan carta karusel JavaScript boleh menggunakan kod JavaScript asli atau merujuk beberapa perpustakaan pihak ketiga yang matang (seperti jQuery, dll.).

Mari kita ambil kod JavaScript asli sebagai contoh untuk memperkenalkan cara melaksanakan carta karusel JavaScript.

Langkah pertama: Struktur HTML

Pertama, kita perlu mentakrifkan struktur karusel dalam HTML, termasuk bekas imej, anak panah kiri dan kanan, butang navigasi, dsb. Contohnya:

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <div class="slider-prev"></div>
  <div class="slider-next"></div>
  <div class="slider-dots">
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
  </div>
</div>

Antaranya, slider-container ialah bekas karusel, slider-wrapper ialah bekas imej, slider-prev dan slider-next ialah anak panah kiri dan kanan, dan slider-dots dan slider-dot ialah butang navigasi.

Langkah 2: Gaya CSS

Seterusnya, kita perlu menetapkan gaya untuk imej karusel, termasuk lebar, ketinggian, kedudukan, dll. bekas, reka letak dan saiz imej, dsb., dan gaya butang navigasi dsb.

.slider-container {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.slider-wrapper {
  position: absolute;
  width: 2400px;
  height: 400px;
  left: 0;
  top: 0;
}

.slider-wrapper img {
  float: left;
  width: 800px;
  height: 400px;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background-image: url("arrow.png");
  background-repeat: no-repeat;
  background-size: 40px auto;
  cursor: pointer;
}

.slider-prev {
  left: 20px;
  transform: rotate(180deg);
}

.slider-next {
  right: 20px;
}

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-dot {
  display: inline-block;
  margin: 0 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.slider-dot.active {
  background-color: #f90;
}

Di atas adalah beberapa gaya contoh mudah Sudah tentu, gaya khusus boleh dilaraskan mengikut keperluan anda.

Langkah 3: Kod JavaScript

Sekarang mula menulis kod JavaScript untuk mencapai kesan karusel. Mula-mula kita perlu mendapatkan rujukan setiap elemen, seperti:

var container = document.querySelector('.slider-container');
var wrapper = document.querySelector('.slider-wrapper');
var prev = document.querySelector('.slider-prev');
var next = document.querySelector('.slider-next');
var dots = document.querySelectorAll('.slider-dot');

Kemudian, kita perlu menetapkan beberapa parameter dan pembolehubah, seperti:

var index = 0;  // 当前图片的索引
var interval = 3000;  // 切换时间间隔（3秒）
var timer = null;  // 定时器

Seterusnya, kita perlu untuk menulis beberapa fungsi, Laksanakan fungsi asas karusel:

Tukar gambar:

function changeImage() {
  wrapper.style.transform = 'translateX(-' + index * 800 + 'px)';
  for (var i = 0; i < dots.length; i++) {
    dots[i].classList.remove(&#39;active&#39;);
  }
  dots[index].classList.add(&#39;active&#39;);
}

Penukaran automatik:

function autoPlay() {
  timer = setInterval(function() {
    index++;
    if (index >= dots.length) {
      index = 0;
    }
    changeImage();
  }, interval);
}

Hentikan pensuisan automatik:

function stopAutoPlay() {
  clearInterval(timer);
}

Kendalikan acara klik butang navigasi:

for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener(&#39;click&#39;, function() {
    index = this.getAttribute(&#39;data-index&#39;);
    changeImage();
    stopAutoPlay();
  });
}

Kendalikan acara klik anak panah kiri dan kanan:

prev.addEventListener('click', function() {
  index--;
  if (index < 0) {
    index = dots.length - 1;
  }
  changeImage();
  stopAutoPlay();
});

next.addEventListener(&#39;click&#39;, function() {
  index++;
  if (index >= dots.length) {
    index = 0;
  }
  changeImage();
  stopAutoPlay();
});

Akhir sekali, kami memulakan penukaran automatik selepas halaman dimuatkan:

window.addEventListener('load', function() {
  autoPlay();
});

Ringkasnya, berikut ialah langkah untuk melaksanakan carta karusel JavaScript yang mudah. Sudah tentu, lebih banyak fungsi boleh dikembangkan mengikut keperluan, seperti kesan fade-in dan fade-out, pemuatan malas, susun atur responsif, dll.

Atas ialah kandungan terperinci Bagaimana untuk menulis imej karusel javascript js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!