js轮播图简单代码怎么写

lewis 7年前 (2019-01-15) 阅读数 11 #程序编程

文章标签 js

以下是一个简单的实现JavaScript轮播图的代码示例：

<!DOCTYPEhtml><html>
<head>
<style>
.slideshow-container{
position:relative;
width:100%;
height:300px;
overflow:hidden;
}
.slide{
width:100%;
height:100%;
display:none;
}
.slideimg{
width:100%;
height:100%;
}
.prev,.next{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:30px;
font-weight:bold;
color:white;
background-color:rgba(0,0,0,0.5);
padding:10px20px;
cursor:pointer;
transition:background-color0.3sease;
}
.prev:hover,.next:hover{
background-color:rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<divclass="slideshow-container">
<divclass="slide">
<imgsrc="image1.jpg"alt="Image1">
</div>
<divclass="slide">
<imgsrc="image2.jpg"alt="Image2">
</div>
<divclass="slide">
<imgsrc="image3.jpg"alt="Image3">
</div>
<aclass="prev">&#10094;</a>
<aclass="next">&#10095;</a>
</div>
<script>
varcurrentSlide=0;
varslides=document.querySelectorAll('.slide');
varprevButton=document.querySelector('.prev');
varnextButton=document.querySelector('.next');
functionshowSlide(n){
slides[currentSlide].style.display='none';
currentSlide=(n+slides.length)%slides.length;
slides[currentSlide].style.display='block';
}
functionprevSlide(){
showSlide(currentSlide-1);
}
functionnextSlide(){
showSlide(currentSlide+1);
}
prevButton.addEventListener('click',prevSlide);
nextButton.addEventListener('click',nextSlide);
showSlide(currentSlide);
</script>
</body>
</html>

这段代码使用了HTML和CSS来创建一个轮播图容器，并通过JavaScript来控制轮播图的切换。其中，.slide类设置为 display: none;来隐藏所有幻灯片，然后在 JavaScript 中，通过更改当前幻灯片的display属性来显示或隐藏幻灯片。.prev 和 .next类用于绑定点击事件，以便在点击“上一个”和“下一个”按钮时切换幻灯片。

你可以将 image1.jpg、image2.jpg 和 image3.jpg替换为你自己的图片路径，以及根据需要调整样式和布局。