Rumah > Artikel > hujung hadapan web > js imej kod pelaksanaan kesan karusel kemahiran javascript

js imej kod pelaksanaan kesan karusel kemahiran javascript

WBOYasal: 2016-05-16 15:32:431355semak imbas

Pertama sekali, izinkan saya melihat kesan karusel imej js, seperti yang ditunjukkan di bawah

Idea khusus:

1. Muatkan halaman, dapatkan keseluruhan bekas, semua li untuk indeks berangka dan ul untuk senarai gambar, tentukan pembolehubah untuk pemasa dan indeks pembolehubah untuk menyimpan indeks semasa
2. Tambahkan pemasa, naikkan indeks setiap 2 saat, dan panggil fungsi menukar imej
Petua:
1. Indeks tidak boleh terus meningkat tanpa had, dan pertimbangan perlu dibuat
2. Apabila memanggil fungsi imej suis, anda perlu melepasi indeks bertambah sebagai parameter
3. Tentukan fungsi penukaran imej
Petua:
1. Lintas semua li dengan indeks berangka dan alih keluar kelas pada setiap li.
2. Cari li yang sepadan mengikut nilai indeks yang diluluskan, tambahkan kelas padanya dan tetapkan ia sebagai sorotan semasa.
3. Kira nilai atas ul di mana gambar diletakkan berdasarkan nilai indeks yang diluluskan
4. Tukar nilai indeks supaya ia sama dengan nilai parameter yang diluluskan
Nota: Nilai atas ul tempat gambar diletakkan =-index*ketinggian gambar tunggal (semua gambar mestilah sama tinggi)
4. Apabila tetikus bergerak merentasi seluruh bekas, gambar berhenti bertukar, pergi dan teruskan
Petua:
1. Kosongkan pemasa apabila tetikus meluncur ke atas keseluruhan bekas
2. Teruskan melaksanakan pemasa apabila tetikus pergi dan beralih ke gambar seterusnya
5. Lintas semua li yang mengandungi nombor, tambah indeks padanya dan tukar kepada gambar yang sepadan apabila tetikus berguling.
Apabila tetikus meluncur ke atas, fungsi penukaran gambar dipanggil dan indeks li yang meluncur ke atas diluluskan.
Kod khusus adalah seperti berikut:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{margin:0;
 padding:0;
 list-style:none;}
 .wrap{height:170px;
  width:490px;
  margin:60px auto;
  overflow: hidden;
  position: relative;
  margin:100px auto;}
 .wrap ul{position:absolute;} 
 .wrap ul li{height:170px;}
 .wrap ol{position:absolute;
   right:5px;
   bottom:10px;}
 .wrap ol li{height:20px; width: 20px;
    background:#ccc;
    border:solid 1px #666;
    margin-left:5px;
    color:#000;
    float:left;
    line-height:center;
    text-align:center;
    cursor:pointer;}
 .wrap ol .on{background:#E97305;
    color:#fff;}

 </style>
 <script type="text/javascript">
 window.onload=function(){
 var wrap=document.getElementById('wrap'),
  pic=document.getElementById('pic').getElementsByTagName("li"),
  list=document.getElementById('list').getElementsByTagName('li'),
  index=0,
  timer=null;

  // 定义并调用自动播放函数
 timer = setInterval(autoPlay, 2000);

  // 鼠标划过整个容器时停止自动播放
 wrap.onmouseover = function () {
  clearInterval(timer);
 }

  // 鼠标离开整个容器时继续播放至下一张
 wrap.onmouseout = function () {
  timer = setInterval(autoPlay, 2000);
 }
  // 遍历所有数字导航实现划过切换至对应的图片
 for (var i = 0; i < list.length; i++) {
  list[i].onmouseover = function () {
  clearInterval(timer);
  index = this.innerText - 1;
  changePic(index);
  };
 };

 function autoPlay () {
  if (++index >= pic.length) index = 0;
  changePic(index);
 }

  // 定义图片切换函数
 function changePic (curIndex) {
  for (var i = 0; i < pic.length; ++i) {
  pic[i].style.display = "none";
  list[i].className = "";
  }
  pic[curIndex].style.display = "block";
  list[curIndex].className = "on";
 }

 };

 </script> 
</head>
<body>
 <div class="wrap" id='wrap'>
 <ul id="pic">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
  <li><img src="4.jpg" alt=""></li>
  <li><img src="5.jpg" alt=""></li> 
 </ul>
 <ol id="list">
  <li class="on">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ol>
 </div>
</body>
</html>

Di atas adalah keseluruhan kandungan artikel ini saya telah berkongsi dengan anda kod pelaksanaan kesan karusel imej js. Saya harap anda boleh menukar imej mengikut pilihan anda sendiri.

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：Bercakap tentang pemahaman kemahiran offsetleft compatibility_javascriptArtikel seterusnya：Bercakap tentang pemahaman kemahiran offsetleft compatibility_javascript

Artikel berkaitan

Lihat lagi