生成轮播图前后端代码实现示例 - jQuery、Bootstrap 和 PHP

由于轮播图的实现方式有很多种，因此前后端代码的实现方式也有所不同。以下是两种常见的轮播图实现方式的前后端代码示例：

1. 前端使用 jQuery 插件实现轮播图，后端通过 AJAX 请求获取图片信息

HTML：

<div class='slider'>
  <ul class='slides'>
    <!-- 轮播图图片 -->
  </ul>
</div>

JS：

$(document).ready(function(){
  // 请求获取图片信息
  $.ajax({
    url: 'get_images.php',
    type: 'GET',
    dataType: 'json',
    success: function(data){
      for(var i=0; i<data.length; i++){
        $('.slides').append('<li><img src=' + data[i].src + '></li>');
      }
      // 初始化轮播图
      $('.slider').slider();
    },
    error: function(jqXHR, textStatus, errorThrown){
      console.log(textStatus + ': ' + errorThrown);
    }
  });
});

PHP：

<?php
// 获取图片信息
$images = array(
  array('src' => 'img1.jpg'),
  array('src' => 'img2.jpg'),
  array('src' => 'img3.jpg'),
  array('src' => 'img4.jpg'),
  array('src' => 'img5.jpg')
);
// 返回 JSON 格式的数据
echo json_encode($images);
?>

2. 前端使用 Bootstrap 实现轮播图，后端通过 PHP 读取图片目录获取图片信息

HTML：

<div id='carouselExampleIndicators' class='carousel slide' data-ride='carousel'>
  <ol class='carousel-indicators'>
    <!-- 轮播图指示器 -->
  </ol>
  <div class='carousel-inner'>
    <!-- 轮播图图片 -->
  </div>
  <a class='carousel-control-prev' href='#carouselExampleIndicators' role='button' data-slide='prev'>
    <span class='carousel-control-prev-icon' aria-hidden='true'></span>
    <span class='sr-only'>Previous</span>
  </a>
  <a class='carousel-control-next' href='#carouselExampleIndicators' role='button' data-slide='next'>
    <span class='carousel-control-next-icon' aria-hidden='true'></span>
    <span class='sr-only'>Next</span>
  </a>
</div>

JS：

$(document).ready(function(){
  // 请求获取图片信息
  $.ajax({
    url: 'get_images.php',
    type: 'GET',
    dataType: 'json',
    success: function(data){
      for(var i=0; i<data.length; i++){
        // 添加轮播图指示器
        if(i == 0){
          $('.carousel-indicators').append('<li data-target='#carouselExampleIndicators' data-slide-to=' + i + ' class='active'></li>');
        } else {
          $('.carousel-indicators').append('<li data-target='#carouselExampleIndicators' data-slide-to=' + i + '></li>');
        }
        // 添加轮播图图片
        if(i == 0){
          $('.carousel-inner').append('<div class='carousel-item active'><img src=' + data[i].src + ' class='d-block w-100' alt='...'></div>');
        } else {
          $('.carousel-inner').append('<div class='carousel-item'><img src=' + data[i].src + ' class='d-block w-100' alt='...'></div>');
        }
      }
    },
    error: function(jqXHR, textStatus, errorThrown){
      console.log(textStatus + ': ' + errorThrown);
    }
  });
});

PHP：

<?php
// 读取图片目录
$dir = 'images/';
$images = array();
if(is_dir($dir)){
  if($dh = opendir($dir)){
    while(($file = readdir($dh)) !== false){
      if($file != '.' && $file != '..'){
        $images[] = array('src' => $dir . $file);
      }
    }
    closedir($dh);
  }
}
// 返回 JSON 格式的数据
echo json_encode($images);
?>