Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej-tutorial js-php.cn

Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej

WBOY

Lepaskan： 2023-10-27 08:42:53

asal

918 orang telah melayarinya

Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej

Cara menggunakan Layui untuk mencapai kesan tatal mendatar imej

Perkembangan teknologi telah membawa reka bentuk web dan pengalaman pengguna ke tahap yang baharu. Kesan tatal mendatar gambar telah menjadi kaedah biasa dalam reka bentuk laman web utama Melalui kesan ini, berbilang gambar boleh dipaparkan dan dilayari dengan baik.

Layui ialah rangka kerja UI bahagian hadapan yang ringan yang dibangunkan berdasarkan jQuery. Berbanding dengan rangka kerja lain, Layui lebih kecil, lebih pantas dan mudah dipelajari dan digunakan. Artikel ini akan memperkenalkan cara menggunakan Layui untuk mencapai kesan tatal mendatar imej, dan memberikan contoh kod khusus.

1. Persediaan
Sebelum menggunakan Layui untuk mencapai kesan tatal mendatar imej, kami perlu memperkenalkan fail berkaitan Layui ke dalam projek. Dalam fail HTML, perkenalkan fail CSS dan JS Layui melalui kod berikut:

<link rel="stylesheet" href="http://cdn.staticfile.org/layui/2.5.4/css/layui.css">
<script src="http://cdn.staticfile.org/layui/2.5.4/layui.js"></script>

Salin selepas log masuk

Seterusnya, kita perlu mencipta bekas div untuk mengehoskan imej, dan menetapkan lebar tetap untuk bekas itu memaparkan berbilang imej dan mencapai tatal orientasi mendatar . Contohnya:

<div class="scroll-container">
    <div class="scroll-content">
        <img  src="image1.jpg" alt="Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej" >
        <img  src="image2.jpg" alt="Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej" >
        <img  src="image3.jpg" alt="Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej" >
        <img  src="image4.jpg" alt="Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej" >
        <img  src="image5.jpg" alt="Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej" >
    </div>
</div>

Salin selepas log masuk

Untuk mencapai kesan penatalan, kita perlu menentukan gaya bekas tatal dalam CSS dan tetapkan atribut limpahan kepada tersembunyi supaya kandungan imej tidak kelihatan apabila ia melebihi skop bekas:

.scroll-container {
    width: 800px;
    overflow: hidden;
}

Salin selepas log masuk

2. Gunakan Layui untuk melaksanakan tatal mendatar
Selepas memperkenalkan rangka kerja Layui ke dalam fail HTML, kita boleh menggunakan modul Carousel Layui untuk mencapai kesan tatal mendatar imej. Mula-mula, perkenalkan modul Carousel ke dalam kod JS:

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

        //执行一个轮播实例
        carousel.render({
            elem: '.scroll-content',
            width: '100%', //设置容器宽度
            height: '200px', //设置容器高度
            arrow: 'always', //始终显示箭头
            anim: 'fade', //切换动画方式
            interval: 3000, //自动切换的时间间隔
            autoplay: true //是否自动切换
        });
    });
</script>

Salin selepas log masuk

Dalam kod di atas, kami memanggil kaedah pemaparan modul karusel, masukkan pemilih (.scroll-content) bekas div yang mengandungi imej, dan tetapkan beberapa Mencapai kesan tatal mendatar. Sebagai contoh, kami menetapkan parameter elem kepada .scroll-content, parameter lebar kepada '100%', parameter ketinggian kepada '200px', anak panah sentiasa dipaparkan, kaedah animasi bertukar pudar, selang penukaran automatik ialah 3000 milisaat, dan sama ada untuk menukar secara automatik .

3. Contoh kod lengkap
Berikut ialah contoh kod lengkap untuk menggunakan Layui untuk mencapai kesan tatal mendatar imej:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片横向滚动效果</title>
    <link rel="stylesheet" href="http://cdn.staticfile.org/layui/2.5.4/css/layui.css">
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-content">
            <img  src="image1.jpg" alt="Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej" >
            <img  src="image2.jpg" alt="Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej" >
            <img  src="image3.jpg" alt="Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej" >
            <img  src="image4.jpg" alt="Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej" >
            <img  src="image5.jpg" alt="Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej" >
        </div>
    </div>

    <script src="http://cdn.staticfile.org/layui/2.5.4/layui.js"></script>
    <script>
        layui.use('carousel', function(){
            var carousel = layui.carousel;

            //执行一个轮播实例
            carousel.render({
                elem: '.scroll-content',
                width: '100%', //设置容器宽度
                height: '200px', //设置容器高度
                arrow: 'always', //始终显示箭头
                anim: 'fade', //切换动画方式
                interval: 3000, //自动切换的时间间隔
                autoplay: true //是否自动切换
            });
        });
    </script>
</body>
</html>

Salin selepas log masuk

Dalam aplikasi sebenar, cuma gantikan laluan imej dalam kod contoh dengan laluan imej sebenar dalam anda projek sendiri Anda boleh mencapai kesan paparan tersuai.

Ringkasan
Sangat mudah untuk menggunakan Layui untuk mencapai kesan tatal mendatar imej Anda hanya perlu memperkenalkan fail Layui yang berkaitan, tentukan bekas imej dan gaya CSS dalam HTML, dan kemudian gunakan modul Karusel Layui untuk mencapai kesan menatal. Saya harap artikel ini dapat memberi inspirasi kepada semua orang dan membolehkan semua orang menggunakan rangka kerja Layui dengan lebih baik untuk mencapai reka bentuk bahagian hadapan yang cemerlang.

Atas ialah kandungan terperinci Cara menggunakan Layui untuk mencapai kesan menatal mendatar imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!