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

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

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

---

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

<link href="https://cdn.bootcss.com/Swiper/4.4.5/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/Swiper/4.4.5/js/swiper.min.js"></script>

代码结构如下：

　　<?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 是为了写点击事件，一张图片时和轮播图片时点击事件一致，点击图片时跳转页面用的。