網頁圖片輪播,一張圖時不輪播,大於一張時輪播

使用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 是為了寫點擊事件，一張圖片時和輪播圖片時點擊事件一致，點擊圖片時跳轉頁面用的。