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

我们有在做企业网站的时候,常用的会在头部位置有一个幻灯图轮播效果。以前早年的时候较多会用到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)