21xrx.com
2025-03-17 01:09:57 Monday
文章检索 我的文章 写文章
实现简单JavaScript轮换图
2023-06-11 04:33:35 深夜i     --     --
JavaScript 轮换图 代码

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

HTML代码:

❮
  ❯

CSS代码:

ss
.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代码:

script
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";
}

  
  

评论区