以下是一个基本的
轮播图代码，使用了 jQuery 库。
HTML 代码：
```
<div class="slideshow">
<img class="slide" src="path/to/image1.jpg" />
<img class="slide" src="path/to/image2.jpg" />
<img class="slide" src="path/to/image3.jpg" />
</div>
<div class="controls">
<button class="prev">Previous</button>
<button class="next">Next</button>
</div>
```
CSS
代码：
```
.slideshow {
position: relative;
}
.slideshow .slide {
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease;
}
.slideshow .slide.active {
opacity: 1;
}
.controls {
margin-top: 10px;
}
.controls button {
margin-right: 10px;
}
```
jQuery
代码：
```
$(function() {
// 获取
轮播图和按钮元素
var $slideshow = $('.slideshow');
var $slides = $slideshow.find('.slide');
var $prev = $('.prev');
var $next = $('.next');
// 给第一张
轮播图加上 active 类
$slides.eq(0).addClass('active');
// 点击按钮切换
轮播图
$prev.on('click', function() {
var $current = $slideshow.find('.active');
var index = $slides.index($current);
$current.removeClass('active');
$slides.eq((index - 1 + $slides.length) % $slides.length).addClass('active');
});
$next.on('click', function() {
var $current = $slideshow.find('.active');
var index = $slides.index($current);
$current.removeClass('active');
$slides.eq((index + 1) % $slides.length).addClass('active');
});
});
```
解释：
1. 在
HTML 中，
轮播图的 img 标签和控件按钮的 button 标签都被包裹在一个父容器内。
2. 在 CSS
中，将
轮播图的所有
图片的 opacity 设为 0，只有 active
图片的 opacity 才设为 1，这样可以实现切换
轮播图时淡入淡出的
效果。
3. 在 jQuery
中，先获取
轮播图、
轮播图图片和按钮元素。然后给第一张
轮播图加上 active 类。
4. 点击按钮时，获取当前 active
图片的 index，根据按钮是 prev 还是 next，计算出下一张
图片的 index，给当前 active
图片移除 active 类，给下一张
图片加上 active 类。注意需要使用取余运算防止 index 越界。
5. 这个
代码只是一个基本的
轮播图，实际使用时还需要考虑更多因素，比如自动轮播、无限循环、响应式等等。
本文介绍了如何利用swiper.js库在HTML5页面中创建多个不同样式的图片轮播效果。通过修改选择器名称以避免互相干扰，并提供了相应的JavaScript代码示例，展示了如何初始化两个独立工作的轮播图。
最低0.47元/天 解锁文章
扫一扫
3119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
