html轮播图实现

作者：繁依Fanyi0 | 2024-07-09 21:49:27

踩

html轮播图

采用 Swiper 来实现轮播图。

需要用到 Swiper7.2.0 的 swiper-bundle.min.css和swiper-bundle.min.js 文件。下载地址：Swiper各版本

实现效果如下：
在这里插入图片描述

代码完整下载：
链接： https://pan.baidu.com/s/1NqAhPrnMlrmYtpfGFgjY3w
提取码： afd7

代码如下：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="swiper-bundle.min.css">
	<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;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
	  .swiper-button-prev ,.swiper-button-next{
	     --swiper-navigation-color: #007aff; /* 单独设置按钮颜色 */
		 --swiper-navigation-size: 20px;    /* 设置按钮大小 */
	  }
	  .swiper-slide .detail {
		height:100px;
		background:rgba(0,0,0,.7);
		position:absolute;
		width:100%;
		bottom:0;
		color:#fff;
		opacity:0;
		transition:opacity .3s .3s;
	}
	.swiper-slide-active .detail {
		opacity:1;
	}
	.swiper-slide .detail h3 {
		/*width:950px;*/
		margin:15px auto 0;
	}
	.swiper-slide .detail p {
		/*width:950px;*/
		margin:5px auto 0;
	}
	.swiper-slide .detail p span {
		/*width:950px;*/
		display:block;
	}
    </style>
</head>
<body>
    <script src="swiper-bundle.min.js"></script>

	<div class="swiper mySwiper">
	  <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="images/nature-1.jpg"> 
			<div class="detail">
                     <h3>1.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-2.jpg">
			<div class="detail">
                     <h3>2.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-3.jpg">
			<div class="detail">
                     <h3>3.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-4.jpg">
			<div class="detail">
                     <h3>4.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-5.jpg">
			<div class="detail">
                     <h3>5.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-6.jpg">
			<div class="detail">
                     <h3>6.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-7.jpg">
			<div class="detail">
                     <h3>7.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-8.jpg">
			<div class="detail">
                     <h3>8.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
        <div class="swiper-slide"><img src="images/nature-9.jpg">
			<div class="detail">
                     <h3>9.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div>
		</div>
      </div>
    </div>

	    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
	
	<script>
    var mySwiper = new Swiper ('.swiper', {
    //direction: 'vertical', // 垂直切换选项
	direction: 'horizontal',//水平切换
    loop: true, // 循环模式选项,true为不断循环
	speed:300,//两页之间的切换速度
	//autoplay: true,//可选选项，自动滑动轮播
	autoplay : {
		delay:2000,   //启用自动轮播并设置播放速度
		disableOnInteraction: false,//用户点击左右按钮手动切换之后，是否停止自动播放。默认为true：停止。
    },
	grabCursor : true, //鼠标放在轮播图上变为手掌

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
	  clickable :true,//点击分页器自动跳转（即点击图下的小圆点自动跳转到相应的轮播图）
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
    </script>
</body>
</html>
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183

参考：
Swiper 基础演示
 Swiper 使用方法
 Swiper 配置选项
 swiper首页特效字幕轮播图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/803768