js imej kod pelaksanaan kesan karusel kemahiran javascript-tutorial js-php.cn

js imej kod pelaksanaan kesan karusel kemahiran javascript

WBOY

Lepaskan： 2016-05-16 15:32:43

asal

1418 orang telah melayarinya

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>

Salin selepas log masuk

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.