用js代码实现轮播图效果
时间: 2023-09-23 07:03:59 浏览: 59
好的,以下是一个简单的用 JavaScript 实现轮播图效果的代码:
HTML 代码:
```html
<div class="slideshow-container">
<div class="slideshow">
<img src="img1.jpg" alt="image1">
<img src="img2.jpg" alt="image2">
<img src="img3.jpg" alt="image3">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
```
CSS 代码:
```css
.slideshow-container {
position: relative;
margin: auto;
}
.slideshow {
display: flex;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
padding: 16px;
color: white;
font-weight: bold;
font-size: 20px;
}
.prev {
left: 0;
}
.next {
right: 0;
}
```
JavaScript 代码:
```javascript
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
let slides = document.getElementsByClassName("slideshow")[0].getElementsByTagName("img");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
```
解释一下代码:
1. `slideIndex` 变量用于存储当前轮播图的索引,初始值为 1。
2. `showSlides` 函数用于显示当前索引对应的图片,并将其他图片的 `display` 属性设置为 `none`,使其隐藏。
3. `plusSlides` 函数用于增加或减少 `slideIndex` 变量的值,并调用 `showSlides` 函数显示对应的图片。
4. HTML 代码中的 `onclick` 事件用于点击“上一个”或“下一个”按钮时调用 `plusSlides` 函数。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)