Rumah > Artikel > hujung hadapan web > Membuat gambar melompat javascript gambar carousel effects_javascript kemahiran

Membuat gambar melompat javascript gambar carousel effects_javascript kemahiran

WBOYasal: 2016-05-16 15:15:161662semak imbas

Kesan karusel imej hampir merupakan kesan yang mesti ada pada halaman utama tapak web hari ini, jadi saya akan menerangkan pelaksanaan mudah kesan ini dari tiga aspek.

Gambar melonjak
Pelaksanaan kawalan jujukan gambar
Pelaksanaan kawalan butang hadapan dan belakang

Dalam artikel ini, mari lihat gambar bertukar mengikut selang waktu.

Mari lengkapkan kod struktur dahulu, saya tidak akan menerangkannya secara terperinci Mari lihat kesannya

Kod adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      box-sizing: border-box;
    }
    a {
      text-decoration: none;
    }
    ul,ol,li{
     list-style: none;
      margin: 0;
      padding: 0;
    }
    #slider{
      width: 800px;
      height: 300px;
      overflow: hidden;
      position: relative;
      margin: 0 auto;
    }
    #slider ul{
      width: 2400px;
      position: relative;
    }
    #slider ul:after{
      content: " ";
      width: 0;
      height: 0;
      display: block;
    }
    #slider ul li{
      float: left;
      width: 800px;
      height: 300px;
      overflow: hidden;
    }
    #slider ul li img{
      width: 100%;
    }
    #slider ol{
      position: absolute;
      bottom: 10px;
      left: 46%;
    }
    #slider ol li{
      display: inline-block;
    }
    #slider ol li a{
      display: inline-block;
      padding:4px 8px;
      border-radius:15px;
      background-color: #000;
      color: #fff;
    }
    #slider .prev, #slider .next{
      display: inline-block;
      position: absolute;
      top: 49%;
      background-color: #000;
      opacity: 0.6;
      color: #fff;
      padding: 3px;
    }
    #slider .prev{
      left: 10px;
    }
    #slider .next{
      right: 10px;
    }
  </style>
</head>
<body>
  
  <div id="slider">
    <ul>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>
    </ul>
    <ol>
      <li> <a href="#">1</a> </li>
      <li> <a href="#">2</a> </li>
      <li> <a href="#">3</a> </li>
    </ol>
    <a href="#">上一张</a>
    <a href="#">下一张</a>
  </div>
</body>
</html>

Baiklah, sekarang mari kita kawal lompatan imej melalui JS.

Mula-mula kita perlu mencari lokasi gambar di sini kita menggunakan ul untuk susun atur, jadi mula-mula kita perlu mencari nombor LI di bawah UL

Kemudian biarkan gambar dipaparkan satu persatu Kami menggunakan mod tetingkap, iaitu mod lapisan topeng adalah tingkap, ul ialah pemandangan di luar tingkap, dan pemandangan ul disusun secara melintang

Kemudian dipamerkan pemandangan luar seperti saiz tingkap iaitu setiap gambar digunakan sebagai pemandangan setiap tingkap Di sini, saiz gambar dikawal supaya sama saiznya dengan tingkap.

Di atas menerangkan konsep, iaitu pemprosesan reka letak Seterusnya, kami mengawal JS Untuk mencapai selang paparan gambar yang berbeza, kami perlu menggunakan setInterval atau setTimeout di sini (kerana ini digunakan Easy to get atas.)

Setiap kali kami melompat, kami mengawal sebelah kiri kedudukan UL, supaya pemandangan di bawah ul boleh dipaparkan secara berbeza setiap kali, dan kiri ini ditentukan mengikut lebar tingkap Gambar pertama Sudah tentu kiri ialah -800 * 0, yang kedua ialah -800*1, yang ketiga ialah -800*2...dan seterusnya kita boleh mendapatkan kod berikut

<script>
   (function(){
     var slider = document.getElementById("slider");
     var imgul = slider.getElementsByTagName("ul")[0];
     var imglis = imgul.getElementsByTagName("li");
     var len = imglis.length;
     var index = 0;
     setInterval(function(){
       if(index >= len){
         index = 0;
       }
        imgul.style.left = - (800 * index) + "px";
        index++;
     },2000);
   })();
 </script>

Kod JS kelihatan sangat mudah seperti ini Di sini saya menetapkan urutan lompatan 2 saat, dan kemudian selepas bilangan lompatan lebih besar daripada atau sama dengan bilangan gambar, biarkan ia kembali ke gambar pertama.

Saya harap artikel ini akan membantu semua orang dalam mempelajari pengaturcaraan javascript.

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：Kod JavaScript tulen untuk melaksanakan kemahiran alat_javascript perbandingan teksArtikel seterusnya：Kod JavaScript tulen untuk melaksanakan kemahiran alat_javascript perbandingan teks

Artikel berkaitan

Lihat lagi