Rumah > Artikel > hujung hadapan web > Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid

Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid

王林asal: 2023-11-04 08:59:171444semak imbas

JavaScript ialah bahasa skrip yang boleh digunakan untuk menambah kesan interaktif pada halaman web. Antaranya, kesan karusel imej dan tayangan slaid ialah kesan animasi halaman web yang biasa Artikel ini akan memperkenalkan cara menggunakan fungsi JavaScript untuk mencapai kedua-dua kesan ini dan memberikan contoh kod tertentu.

Karusel gambar

Karusel gambar ialah kesan yang memutarkan berbilang gambar dengan cara tertentu. Apabila melaksanakan karusel imej, pemasa JavaScript dan kawalan gaya CSS perlu digunakan.

(1) Penyediaan

Pertama, dalam fail HTML, anda perlu menentukan bekas div untuk memaparkan imej karusel. Kita boleh menentukan elemen ul lain untuk menyimpan semua imej yang perlu diputar. Setiap elemen li mengandungi imej.

<div id="slider">
  <ul>
    <li><img  src="img1.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
    <li><img  src="img2.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
    <li><img  src="img3.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
    <li><img  src="img4.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
  </ul>
</div>

Dalam fail CSS, beberapa penggayaan perlu dilakukan pada elemen ini. Sebagai contoh, tetapkan lebar dan ketinggian bekas div kepada saiz sebenar imej dan tetapkan atribut limpahan kepada tersembunyi, supaya bahagian di luar bekas boleh disembunyikan. Pada masa yang sama, tetapkan lebar elemen ul kepada jumlah lebar semua imej, dan tetapkan ketinggian kepada ketinggian sebenar imej.

#slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#slider ul {
  width: 2400px; /* 4张图片的宽度之和 */
  height: 400px;
  position: absolute;
  left: 0;
}

(2) Pelaksanaan karusel

Seterusnya, kita perlu menggunakan fungsi JavaScript untuk mencapai kesan karusel. Proses pelaksanaan khusus adalah seperti berikut:

① Tentukan indeks pembolehubah untuk merekodkan nombor siri gambar yang sedang dipaparkan.

var index = 0;

② Tulis fungsi karusel untuk menukar gambar pada selang waktu tertentu dan mengemas kini nilai pembolehubah indeks. Dalam fungsi ini, nilai kiri elemen ul perlu ditetapkan kepada nombor berlawanan (nombor negatif) lebar imej semasa, supaya kesan karusel boleh dicapai.

function slide() {
  index++;
  if (index >= 4) {  // 图片总数为4，如果index超过4，就将其重置为0
    index = 0;
  }
  var leftVal = -index * 600 + "px";  // 每次切换，将ul元素的left值设置为当前图片的宽度的相反数
  $("#slider ul").stop().animate({left: leftVal}, 500);  // 使用jQuery的animate方法实现滑动效果
}

Dalam kod di atas, kami menggunakan kaedah animate() dalam perpustakaan jQuery, yang boleh digunakan untuk mencapai kesan animasi. Kaedah animate() menerima dua parameter Parameter pertama ialah objek yang digunakan untuk menetapkan sifat CSS dan nilai animasi Di sini kita menetapkan atribut kiri bagi elemen ul tentukan masa animasi, dalam milisaat.

③ Panggil fungsi karusel dan gunakan kaedah setInterval() untuk melaksanakannya dengan kerap.

setInterval(slide, 2000);

Dalam kod di atas, kami menggunakan kaedah setInterval(), yang boleh digunakan untuk melaksanakan kod yang ditentukan dengan kerap. Parameter pertama ialah nama fungsi yang akan dilaksanakan secara tetap, dan parameter kedua ialah selang masa dalam milisaat.

Akhir sekali, kod pelaksanaan keseluruhan karusel imej adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <title>图片轮播</title>
  <meta charset="utf-8">
  <style>
    #slider {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }

    #slider ul {
      width: 2400px;
      height: 400px;
      position: absolute;
      left: 0;
    }

    #slider ul li {
      float: left;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function () {
      var index = 0;

      function slide() {
        index++;
        if (index >= 4) {
          index = 0;
        }
        var leftVal = -index * 600 + "px";
        $("#slider ul").stop().animate({left: leftVal}, 500);
      }

      setInterval(slide, 2000);
    })
  </script>
</head>
<body>
  <div id="slider">
    <ul>
      <li><img  src="img1.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
      <li><img  src="img2.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
      <li><img  src="img3.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
      <li><img  src="img4.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" ></li>
    </ul>
  </div>
</body>
</html>

kesan tayangan slaid

(1) Penyediaan

Begitu juga, dalam fail HTML, bekas div perlu ditakrifkan untuk memaparkan slaid. Kita boleh mentakrifkan berbilang elemen img, setiap elemen img mengandungi gambar.

<div id="slideshow">
  <img  src="img1.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" >
  <img  src="img2.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" >
  <img  src="img3.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" >
  <img  src="img4.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" >
</div>

Dalam fail CSS, kita perlu menggayakan elemen ini. Sebagai contoh, tetapkan lebar dan tinggi bekas div kepada saiz sebenar imej, dan tetapkan atribut limpahan kepada tersembunyi; imej pertama Ketelusan imej ditetapkan kepada 0.

#slideshow {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#slideshow img:first-child {
  opacity: 1;
}

Dalam kod di atas, kami menggunakan :first-child pseudo-class untuk menetapkan ketelusan imej pertama kepada 1.

(2) Pelaksanaan tayangan slaid

Seterusnya, kita perlu menggunakan fungsi JavaScript untuk mencapai kesan tayangan slaid. Proses khusus adalah seperti berikut:

① Tentukan indeks pembolehubah untuk merekodkan nombor siri gambar yang sedang dipaparkan.

var index = 1;

② Tulis fungsi untuk menukar gambar dan mengemas kini nilai pembolehubah indeks. Dalam fungsi ini, kami mula-mula menetapkan ketelusan imej yang dipaparkan pada masa ini kepada 0, kemudian menambah 1 pada nilai pembolehubah indeks, dan menentukan sama ada jumlah bilangan imej melebihi. Jika melebihi, tetapkan semula kepada 1. Kemudian tetapkan ketelusan imej seterusnya kepada 1 dan hidupkan ia.

function show() {
  $("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 0}, 1000); // 当前图片透明度减少
  index++;
  if (index > 4) {
    index = 1;
  }
  $("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 1}, 1000); // 下一张图片透明度增加
}

Dalam kod di atas, kami menggunakan pemilih :nth-child, yang boleh memilih elemen anak di bawah elemen induk yang ditentukan. Dalam contoh ini, kami menggunakan pemilih ini untuk memilih imej indeks.

③ Gunakan kaedah setInterval() untuk melaksanakan fungsi pertunjukan dengan kerap.

$(function () {
  setInterval(show, 3000);
})

Dalam kod di atas, kami menggunakan kaedah $() dan kaedah setInterval() pustaka jQuery untuk melaksanakan panggilan berjadual. Kaedah $() digunakan untuk mendapatkan elemen yang ditentukan, dan kaedah setInterval() boleh memanggil fungsi yang ditentukan secara berkala.

Akhir sekali, kod pelaksanaan keseluruhan kesan slaid adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <title>幻灯片效果</title>
  <meta charset="utf-8">
  <style>
    #slideshow {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }

    #slideshow img {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

    #slideshow img:first-child {
      opacity: 1;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function () {
      var index = 1;

      function show() {
        $("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 0}, 1000);
        index++;
        if (index > 4) {
          index = 1;
        }
        $("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 1}, 1000);
      }

      setInterval(show, 3000);
    })
  </script>
</head>
<body>
  <div id="slideshow">
    <img  src="img1.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" >
    <img  src="img2.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" >
    <img  src="img3.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" >
    <img  src="img4.jpg" alt="Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid" >
  </div>
</body>
</html>

Melalui contoh kod di atas, kami telah melaksanakan penggunaan fungsi JavaScript untuk melaksanakan karusel imej dan kesan slaid, dan memperkenalkan proses pelaksanaan khusus. Teknologi ini sangat membantu untuk meningkatkan interaksi halaman web dan kesan animasi Pembaca boleh mengubah suai dan mengoptimumkan mengikut keperluan sebenar dan terus meningkatkan keupayaan pembangunan mereka.

Atas ialah kandungan terperinci Gunakan fungsi JavaScript untuk melaksanakan karusel imej dan kesan tayangan slaid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery css html 对象事件选择器 overflow 伪类 ul li

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ringkasan pengalaman pembangunan terminal mudah alih berasaskan JavaScriptArtikel seterusnya：Ringkasan pengalaman pembangunan terminal mudah alih berasaskan JavaScript

Artikel berkaitan

Lihat lagi