swiper游戏特色幻灯片图片轮播实例免费下载

分类栏目:焦点图

182

条评论

素材描述:

1、head引入css文件

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

2、head引入js文件

1
2
<script src="js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>

3、body引入部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>
 
<script src="js/script.js"></script>

全部评论 / 0