Tutorial menggunakan CSS untuk melaksanakan kesan karusel automatik imej responsif

Dengan populariti peranti mudah alih, reka bentuk web perlu mengambil kira faktor seperti resolusi peranti dan saiz skrin terminal yang berbeza untuk mencapai pengalaman pengguna yang baik. Apabila melaksanakan reka bentuk responsif tapak web, selalunya perlu menggunakan kesan karusel imej untuk memaparkan kandungan berbilang imej dalam tetingkap visual yang terhad, dan pada masa yang sama, ia juga boleh meningkatkan kesan visual tapak web. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan karusel automatik imej responsif dan memberikan contoh dan analisis kod.

Idea pelaksanaan

Karusel imej responsif boleh dilaksanakan melalui reka letak fleksibel CSS. Dalam bekas tetap, sediakan bekas fleksibel untuk mengandungi setiap gambar dalam bekas kecil fleksibel. Kemudian dengan menetapkan susunan sub-bekas flex dan lebar sub-elemen, susunan berjubin gambar dicapai. Walau bagaimanapun, kerana lebar bekas akan berbeza di bawah saiz skrin yang berbeza, anda perlu menggunakan pertanyaan media untuk menukar lebar bekas dan sub-elemen secara dinamik untuk menyesuaikan diri dengan resolusi skrin yang berbeza. Kemudian dengan menetapkan kesan animasi CSS3, kesan karusel automatik direalisasikan, dan kesan gelongsor direalisasikan melalui js. . -item ialah nama gaya sub-bekas yang terkandung dalam imej, .carousel-prev dan .carousel-next ialah nama gaya anak panah kiri dan kanan, kami akan menetapkan gaya dalam bahagian CSS.

Bahagian CSS

1. Seterusnya, kita perlu menetapkan gaya dalam bahagian CSS, termasuk gaya bekas, subbekas dan anak panah. Kod khusus adalah seperti berikut:

<div class="carousel-container">
  <div class="carousel-items">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
    <img src="image4.jpg" alt="">
    <img src="image5.jpg" alt="">
  </div>
  <div class="carousel-prev"></div>
  <div class="carousel-next"></div>
</div>

Dalam definisi gaya, kami menetapkan kedudukan relatif untuk bekas untuk mencapai kedudukan mutlak subbekas dan anak panah. Menggunakan limpahan:tersembunyi, anda boleh menyembunyikan bahagian melimpah sub-bekas dalam bekas. Sub-bekas menggunakan reka letak fleksibel, dan atribut nowrap menghalang elemen sub-bekas daripada dibalut. Dan tetapkan lebar subbekas kepada 500%. Dengan menetapkan lebar gambar dalam subbekas kepada 20%, setiap baris boleh memaparkan 5 gambar dan menetapkan jidar kanan antara gambar kepada 1rem untuk menjadikan kesan paparan lebih cantik. Anak panah kiri dan kanan dipusatkan secara menegak melalui kedudukan mutlak dan atas margin negatif.

Pertanyaan media untuk menetapkan atribut responsif

2. Di bawah saiz skrin yang berbeza, lebar bekas dan sub-elemen perlu ditukar secara dinamik untuk menyesuaikan diri dengan resolusi skrin yang berbeza. Kami boleh menetapkan sifat responsif melalui pertanyaan media dan menukar lebar bekas dan sub-bekas pada saiz skrin yang berbeza, seperti yang ditunjukkan di bawah:

.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.carousel-items {
  display: flex;
  flex-wrap: nowrap;
  width: 500%; /* 将子容器宽度扩大5倍 */
}

.carousel-items img {
  width: 20%;
  margin-right: 1rem;
  flex: 1;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

.carousel-prev {
  left: 0;
}

.carousel-next {
  right: 0;
}

Dalam contoh di atas, kami menetapkan img dan karusel item karusel mengikut saiz tetingkap tukar -gaya bekas. Pada skrin kecil, kami menetapkan setiap imej kepada lebar 50%, jangan tetapkan jidar kanan antara imej dan tetapkan ketinggian kepada 250px dalam bekas .crosso pada skrin yang lebih kecil, kami tetapkan imej kepada 100% Lebarnya; ditetapkan kepada 180px dalam bekas .crosso.

CSS3 Animation

3. Menggunakan animasi CSS3, anda boleh mencapai kesan karusel imej automatik Contoh kod adalah seperti berikut:

/* 根据不同屏幕尺寸改变样式 */
@media (max-width: 768px) {
  .carousel-items img {
    width: 50%;
  }
  .carousel-container {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .carousel-items img {
    width: 100%;
    margin-right: 0;
  }
  .carousel-container {
    height: 180px;
  }
}

Dalam contoh di atas, kami menetapkan subbekas imej untuk menatal sekali setiap 10 saat, dan animasi. dilengkapkan oleh carousel-animation , linear bermaksud animasi adalah linear, dan infinite bermaksud animasi gelung tanpa had.

JavaScript untuk mencapai kesan gelongsor

4. Akhir sekali, kami menggunakan JavaScript untuk mencapai kesan gelongsor imej apabila anak panah kiri dan kanan diklik Contoh kod adalah seperti berikut:

@keyframes carousel-animation {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-100%);
  }
}

.carousel-items {
  /* 动画设置 */
  animation: carousel-animation 10s infinite linear;
}

.carousel-items:hover {
  /* 鼠标悬停时终止动画 */
  animation-play-state: paused;
}

Dalam contoh di atas, kami memperoleh elemen. daripada anak panah kiri dan kanan melalui querySelector dan bind click event. Gunakan fungsi carouselScroll untuk mencapai kesan gelongsor gambar setiap kali anda mengklik. container.scrollWidth mewakili lebar berkesan sub-bekas, dan container.clientWidth mewakili lebar yang boleh dilihat Apabila menatal ke tepi bekas, kedudukan tatal akan ditetapkan ke kedudukan bertentangan untuk mencapai kesan tatal bulat.

Ringkasan

Dalam artikel ini, kami menggunakan reka letak fleksibel CSS3 dan kesan animasi, serta JavaScript untuk melaksanakan peristiwa klik anak panah kiri dan kanan, dan berjaya melaksanakan kesan karusel automatik imej responsif. Kami juga mencapai reka bentuk responsif yang lebih kaya dengan menambahkan pertanyaan media dan kesan tuding. Contoh kod mempunyai tahap umum tertentu dan juga berguna sebagai rujukan untuk pemula.

Atas ialah kandungan terperinci Tutorial menggunakan CSS untuk melaksanakan kesan karusel automatik imej responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!