21xrx.com
2024-09-20 05:33:04 Friday
登录
文章检索 我的文章 写文章
实现简单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";

}

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复