Cara menggunakan Layui untuk mencapai kesan tayangan slaid mengezum masuk dan keluar imej

. Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Layui untuk mencapai kesan tayangan slaid zum masuk dan zum keluar imej, dan memberikan contoh kod khusus.

Layui ialah rangka kerja UI bahagian hadapan yang ringkas dan mudah digunakan yang menyediakan komponen yang kaya dan fungsi yang berkuasa. Komponen Carousel boleh digunakan untuk mencapai kesan slaid.

Pertama, kami perlu memperkenalkan fail sumber Layui yang berkaitan. Anda boleh memuat turun versi terkini fail sumber daripada laman web rasmi Layui (https://www.layui.com/) dan memperkenalkannya ke dalam halaman HTML.

<link rel="stylesheet" href="path/to/layui.css">
<script src="path/to/layui.js"></script>

Seterusnya, kita perlu menyediakan data imej. Laluan imej boleh disimpan dalam tatasusunan. Dalam contoh ini, kami menganggap terdapat tiga imej.

var images = [
  "path/to/image1.jpg",
  "path/to/image2.jpg",
  "path/to/image3.jpg"
];

Kemudian, kita perlu mencipta bekas untuk memaparkan tayangan slaid. Tambahkan elemen div pada HTML dan tetapkan id unik.

<div id="carousel" class="layui-carousel">
  <div carousel-item>
    <!-- 图片放大和缩小区域 -->
  </div>
  <ol class="layui-carousel-ind">
    <!-- 图片索引区域 -->
  </ol>
</div>

Seterusnya, kita perlu menulis kod JavaScript untuk memulakan komponen Carousel dan mengikat data imej.

layui.use(['carousel'], function() {
  var carousel = layui.carousel;
  
  carousel.render({
    elem: '#carousel',
    width: '100%',
    height: '500px',
    arrow: 'always',
    interval: 3000,
    indicator: 'inside'
  });
  
  var carouselInst = carousel.instance();
  carouselInst.reload({
    elem: '#carousel',
    width: '100%',
    height: '500px',
    arrow: 'always',
    interval: 3000,
    indicator: 'inside',
    anim: 'fade',
    data: images
  });
});

Dalam kod di atas, kami mula-mula menggunakan kaedah layui.use untuk memuatkan komponen Carousel. Kemudian, gunakan kaedah carousel.render untuk memulakan beberapa pilihan konfigurasi komponen Carousel, seperti id bekas, lebar, ketinggian, mod paparan anak panah, selang penukaran dan kedudukan penunjuk. Seterusnya, panggil kaedah carousel.instance untuk mendapatkan tika Carousel, kemudian gunakan kaedah carouselInst.reload untuk memuat semula pilihan konfigurasi komponen Carousel, dan ikat data imej ke komponen Carousel melalui atribut data.

Kini, kami telah melengkapkan kod yang menggunakan Layui untuk melaksanakan kesan tayangan slaid mengezum masuk dan keluar imej. Seterusnya, anda perlu menggunakan kesan zum masuk dan keluar gambar untuk memaparkan gambar. Kita boleh menggunakan pemalam pembesaran imej untuk mencapai matlamat ini.

<link rel="stylesheet" href="path/to/layui.css">
<script src="path/to/layui.js"></script>
 
 


  

    

      
      

        
      
    
  
  

    
  


<script>
  layui.use(['carousel'], function() {
    var carousel = layui.carousel;

    carousel.render({
      elem: '#carousel',
      width: '100%',
      height: '500px',
      arrow: 'always',
      interval: 3000,
      indicator: 'inside',
      anim: 'fade'
    });
    var carouselInst = carousel.instance();
    carouselInst.reload({
      elem: '#carousel',
      width: '100%',
      height: '500px',
      arrow: 'always',
      interval: 3000,
      indicator: 'inside',
      anim: 'fade',
      data: images
    });

    $(".imgbox").imgbox({
      'zoomrange': [1.2, 10], // 图片放大的范围
      'maxsize': [800, 600], // 图片的最大尺寸
      'minsize': [100, 100], // 图片的最小尺寸
      'info': true // 是否显示图片详情
    });
  });
</script>

Dalam kod di atas, kita perlu memperkenalkan fail sumber jQuery dan pemalam pembesaran imej terlebih dahulu. Dalam pilihan konfigurasi pemalam imgbox, kami boleh menetapkan julat pembesaran imej, saiz maksimum dan minimum imej dan sama ada untuk memaparkan butiran imej.

Melalui kod di atas, kami telah berjaya melaksanakan kesan tayangan slaid mengezum masuk dan keluar imej menggunakan Layui, dan menyediakan contoh kod khusus untuk rujukan. Saya harap artikel ini membantu anda, dan selamat berprogram!

Atas ialah kandungan terperinci Cara menggunakan Layui untuk mencapai kesan tayangan slaid mengezum masuk dan keluar imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!