使用Swiper实现大屏轮播图展示-CSDN博客

本文链接：https://blog.csdn.net/2301_78858267/article/details/147939238

进入官网（下载Swiper - Swiper中文网），下载swiper，解压后进入到swiper里的demo目录，里面提供了很多演示示例，编辑相应的html文件，将里面的文字内容替换为图片文件，即可通过浏览器直接打开html文件查看轮播图效果。

这里我使用了asp脚本实现动态展示指定文件夹里的图片，并对swiper按自己所需进行了简单的设置。

代码如下：

<%
option explicit

response.Buffer=true
response.Expires=-1


%>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Layout</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../swiper-bundle.min.css" />

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
	  
    }
	
  </style>
</head>

<body>

  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
<%

	dim imgPath,fso,folder,files,file
	imgPath=server.MapPath("images")

	' 创建文件系统对象
	Set fso = Server.CreateObject("Scripting.FileSystemObject")

	' 检查文件夹是否存在
	If fso.FolderExists(imgPath) Then
		' 获取文件夹对象
		Set folder = fso.GetFolder(imgPath)
		' 获取文件夹中的所有文件
		Set files = folder.Files
		for Each file in files	

			response.Write("<div class='swiper-slide'>")
			response.Write("<image src=""images\" & fso.getbasename(file)  & ".jpg"" />")
			response.Write("</div>")
		Next
	
	End If

	' 释放对象
	Set files = Nothing
	Set folder = Nothing
	Set fso = Nothing
	


%>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <!-- Swiper JS -->
  <script src="../swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
	  loop:true, //开启无限循环
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
	  autoplay:{
		autoplay:true, //开启自动轮播
		delay:5000, //设置轮播间隔5s
	  
	  }
    });
  </script>
</body>

</html>

将网站挂到IIS上即可查看效果。

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

优化：

上面的代码还是不够好，当要轮播的图片文件夹里又更新了图片，需要手动去刷新大屏页面，下面的代码将优化这一问题，实现大屏页面根据图片数量自动设置刷新时间：

<%
option explicit
response.Buffer=true
response.Expires=-1

	dim imgPath,fso,folder,files,file,total,freshtime,intervaltime
	'图片存放文件夹
	imgPath=server.MapPath("images")
	'定义间隔秒数
	intervaltime=20
	' 创建文件系统对象
	Set fso = Server.CreateObject("Scripting.FileSystemObject")

	' 检查文件夹是否存在
	If fso.FolderExists(imgPath) Then
		' 获取文件夹对象
		Set folder = fso.GetFolder(imgPath)
		' 获取文件夹中的所有文件
		Set files = folder.Files
		'获取文件数
		total=files.count
		'页面刷新时间
		freshtime=intervaltime*total


	
%>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Layout</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!--设置页面自动刷新时间-->
  <meta http-equiv="refresh" content="<%=freshtime%>"
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../swiper-bundle.min.css" />

  <!-- styles -->
  <style>
    html,body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
     z font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;

    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide image {
      display: block;
      width: 100%;
      height: 100%;

      object-fit: cover;
	  
    }
	
  </style>
</head>

<body>

  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
<%

		for Each file in files	

			response.Write("<div class='swiper-slide'>")
			response.Write("<image src=""images\" & fso.getbasename(file)  & "." & fso.getextensionname(file) &""" />")
			response.Write("</div>")
		Next
	
	End If

	' 释放对象
	Set files = Nothing
	Set folder = Nothing
	Set fso = Nothing
	


%>
    </div>
<!-- 
   <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
	-->
  </div>

  <!-- Swiper JS -->
  <script src="../swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
	  loop:true, //循环轮播
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
	  autoplay:{
		autoplay:true, //设置自动轮播
		delay:<%=intervaltime*1000%>, //设置轮播间隔
	  }
    });
  </script>
</body>

</html>