一个基于Swiper JS图片幻灯轮播案例文件打包源码下载

老蒋

发布于 2021-12-27 12:28:29

2.5K0

发布于 2021-12-27 12:28:29

我们有在做企业网站的时候，常用的会在头部位置有一个幻灯图轮播效果。以前早年的时候较多会用到FLASH特效，但是那种基本上被淘汰掉，如今都要用AJAX或者是直接用这种Swiper JS图片幻灯轮播实现。这里老蒋有在网上找到一个用到，直接打包一并分享一下我这边用到的案例，以便后面需要的时候也下载到。

我们只需要修改代码部分的图片数量和图片URL地址就可以，他是自动根据我们的图片数量显示的，然后我们只需要将代码搬迁到我们需要的网站。可以单独用CSS和JS引用到站点。

<div class="hmFocus">
<div class="swiper-container autoImg">
    <div class="swiper-wrapper">
     
		      <div class="swiper-slide">  <a href="#" target="_blank"><img src="images/1.jpg"></a></div>
			   <div class="swiper-slide">  <a href="#" target="_blank"><img src="images/2.jpg"></a></div>
			    <div class="swiper-slide">  <a href="#" target="_blank"><img src="images/3.jpg"></a></div>
    </div>
    <div class="swiper-pagination"></div>
</div>
</div>
<script language="javascript">
var swiper = new Swiper('.hmFocus .swiper-container', {
	pagination: '.swiper-pagination',
	loop: true,
	autoplay: 5500,
	paginationClickable: true
});
</script>

源码打包下载：

网盘下载（提取码：y8e5）

本文出处：老蒋部落 » 一个基于Swiper JS图片幻灯轮播案例文件打包源码下载 | 欢迎分享

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-05-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

打包