swiper特效代码、swiper游戏网站幻灯片轮播代码

特效描述：利用swiper实现 游戏网站 幻灯片 轮播代码，利用swiper实现游戏网站幻灯片轮播代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/swiper.min.css">

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery.min.js"></script>

<script src="js/swiper.min.js"></script>

<script src="js/script.js"></script>

3. HTML代码

<div class="wrap">
<div class="p-box">
<ul class="tab">
<li class="f01 on"></li>
<li class="f02"></li>
<li class="f03"></li>
<li class="f04"></li>
<li class="f05"></li>
</ul>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/banner1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="images/banner2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="images/banner3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="images/banner4.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="images/banner5.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<img class="char0" src="images/char0.png" alt="">
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei’;">
</div>

下载地址

立即下载