网页图片轮播,一张图时不轮播,大于一张时轮播

柔情只为你懂 2021-10-29 12:18 390阅读 0赞

使用swiper做轮播，需求是images文件夹下有多少图片就轮播多少图片，一张图片时不轮播。

因前端js不能获取目录和文件列表，所以在这里使用了php来读取图片文件列表，文件为php格式 代码内容为html+php。

--------------------

需要引入swiper的css 库和swiper的js库 用到jquery就引入jquery，用不到就不引入

代码结构如下：

<?php  
　　　　\# 读取images文件夹下banner开头的jpg图片文件列表  
　　　　$img\_list = glob("./images/banner\*.jpg");  
　　?>

<?php if(count($img_list) == 1) :?>
            <div class="index-img j_img_jump">
                <img src="<?php echo $img_list[0]; ?>">
            </div>
        <?php else: ?>
            
            <div class="swiper-container">
                <div class="swiper-wrapper">
                <?php foreach ($img_list as $key => $value) : ?>
                        <div class="swiper-slide index-img j_img_jump">
                            <img src="<?php echo $value; ?> ">
                        </div>
                <?php endforeach; ?>
                </div>
            </div>
        <?php endif; ?>

js部分的代码：

new Swiper('.swiper-container', {
    　　autoplay: true,
    　　loop:true,
    　　autoplay: {
    　　　　delay: 3000,
    　　　　disableOnInteraction: false
    　　}
    })

php部分主要用到了glob函数，它可以返回匹配指定模式的文件名或目录，如果存在 返回的是个数组,不存在会返回false，我在这里读取的是images文件夹下以banner开头的jpg文件，用count判断数组的长度，如果只有一个文件 就取第0个的值 渲染的时候就不渲染到swiper里了，图片大于一张时，使用foreach把数组的每一个值渲染到swiper里，就会轮播

js部分就是swiper的基本配置了。

--------------------

图片img标签的父容器div上的类名 index-img 是为了写图片的宽高样式，一张图片时和轮播图片时宽高样式一致。

图片img标签的父容器div上的类名 j\_img\_jump 是为了写点击事件，一张图片时和轮播图片时点击事件一致，点击图片时跳转页面用的。

转载于:https://www.cnblogs.com/easth/p/php\_swiper.html