实现简单JavaScript轮换图 |21xrx.com

实现简单JavaScript轮换图

2023-06-17 22:19:17 深夜i -- --

JavaScript 轮换图代码

我最近在学习JavaScript，看到了一个简单实用的轮换图，分享一下给大家。这个轮换图可以实现图片的轮换，有多张图片，可以自动循环播放，同时还可以手动控制。以下是实现JavaScript简单轮换图的代码。

HTML代码：

❮ ❯

CSS代码：


.slideshow-container
 position: relative;
 margin: auto;
 max-width: 500px;
.slide
 display: none;
.prev, .next
 position: absolute;
 top: 50%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 user-select: none;
.prev:hover, .next:hover {
 background-color: rgba(0,0,0,0.8);
}
.next
 right: 0;
 border-radius: 3px 0 0 3px;

JavaScript代码：


var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
 showSlides(slideIndex += n);
}
function showSlides(n) {
 var i;
 var slides = document.getElementsByClassName("slide");
 if (n > slides.length) {slideIndex = 1}
 if (n < 1) {slideIndex = slides.length}
 for (i = 0; i < slides.length; i++) {
   slides[i].style.display = "none";
 }
 slides[slideIndex-1].style.display = "block";
}

上一篇: idea打包java可执行jar包

下一篇: 如何撤销Java程序中的上一步操作

评论区

()

相似文章