Comment utiliser Layui pour obtenir un effet de défilement horizontal des images-js tutoriel-php.cn

Comment utiliser Layui pour obtenir un effet de défilement horizontal des images

WBOY

Libérer： 2023-10-27 08:42:53

original

910 Les gens l'ont consulté

Comment utiliser Layui pour obtenir un effet de défilement horizontal des images

Comment utiliser Layui pour obtenir l'effet de défilement horizontal des images

Le développement de la technologie a amené la conception Web et l'expérience utilisateur à un nouveau niveau. L'effet de défilement horizontal des images est devenu une méthode courante dans la conception des principaux sites Web. Grâce à cet effet, plusieurs images peuvent être bien affichées et parcourues.

Layui est un framework d'interface utilisateur frontal léger développé sur la base de jQuery. Comparé à d'autres frameworks, Layui est plus petit, plus rapide et facile à apprendre et à utiliser. Cet article expliquera comment utiliser Layui pour obtenir l'effet de défilement horizontal des images et fournira des exemples de code spécifiques.

1. Préparation
Avant d'utiliser Layui pour obtenir l'effet de défilement horizontal des images, nous devons introduire les fichiers liés à Layui dans le projet. Dans le fichier HTML, introduisez les fichiers CSS et JS de Layui via le code suivant :

<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>

Copier après la connexion

Ensuite, nous devons créer un conteneur div pour héberger l'image, et définir une largeur fixe pour le conteneur afin d'afficher plusieurs images et d'obtenir un défilement d'orientation horizontale. . Par exemple :

<div class="scroll-container">
    <div class="scroll-content">
        <img  src="image1.jpg" alt="Comment utiliser Layui pour obtenir un effet de défilement horizontal des images" >
        <img  src="image2.jpg" alt="Comment utiliser Layui pour obtenir un effet de défilement horizontal des images" >
        <img  src="image3.jpg" alt="Comment utiliser Layui pour obtenir un effet de défilement horizontal des images" >
        <img  src="image4.jpg" alt="Comment utiliser Layui pour obtenir un effet de défilement horizontal des images" >
        <img  src="image5.jpg" alt="Comment utiliser Layui pour obtenir un effet de défilement horizontal des images" >
    </div>
</div>

Copier après la connexion

Pour obtenir l'effet de défilement, nous devons définir le style du conteneur de défilement en CSS et définir l'attribut overflow sur caché afin que le contenu de l'image ne soit pas visible lorsqu'il dépasse la portée du conteneur :

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

Copier après la connexion

2. Utilisez Layui pour implémenter le défilement horizontal
Après avoir introduit le framework Layui dans le fichier HTML, nous pouvons utiliser le module Carousel de Layui pour obtenir l'effet de défilement horizontal de l'image. Tout d'abord, introduisez le module Carousel dans le code 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>

Copier après la connexion

Dans le code ci-dessus, nous appelons la méthode de rendu du module carrousel, passons le sélecteur (.scroll-content) d'un conteneur div contenant une image, et définissons quelques Paramètres. Obtenez un effet de défilement horizontal. Par exemple, nous définissons le paramètre elem sur .scroll-content, le paramètre width sur '100%', le paramètre height sur '200px', la flèche est toujours affichée, la méthode d'animation de commutation est en fondu, l'intervalle de commutation automatique est de 3000 millisecondes, et s'il faut basculer automatiquement.

3. Exemple de code complet
Ce qui suit est un exemple de code complet pour utiliser Layui pour obtenir l'effet de défilement horizontal des images :

<!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="Comment utiliser Layui pour obtenir un effet de défilement horizontal des images" >
            <img  src="image2.jpg" alt="Comment utiliser Layui pour obtenir un effet de défilement horizontal des images" >
            <img  src="image3.jpg" alt="Comment utiliser Layui pour obtenir un effet de défilement horizontal des images" >
            <img  src="image4.jpg" alt="Comment utiliser Layui pour obtenir un effet de défilement horizontal des images" >
            <img  src="image5.jpg" alt="Comment utiliser Layui pour obtenir un effet de défilement horizontal des images" >
        </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>

Copier après la connexion

Dans les applications réelles, remplacez simplement le chemin de l'image dans l'exemple de code par le chemin de l'image réel dans votre propre projet Vous pouvez obtenir des effets d'affichage personnalisés.

Résumé
Il est très simple d'utiliser Layui pour obtenir l'effet de défilement horizontal des images. Il vous suffit d'introduire les fichiers pertinents de Layui, de définir le conteneur d'image et le style CSS en HTML, puis d'utiliser le module Carrousel de Layui pour obtenir l'effet. effet de défilement. J'espère que cet article pourra inspirer tout le monde et permettre à chacun de mieux utiliser le framework Layui pour obtenir une excellente conception frontale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!