html轮播图无缝衔接js代码
时间: 2023-12-25 11:29:39 浏览: 148
js垂直无接缝图片滚动代码.rar
以下是一个使用HTML和JavaScript实现无缝轮播图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.slideshow-container {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="slide">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<script>
var slides = document.querySelectorAll('.slide');
var currentIndex = 0;
var slideWidth = slides[0].clientWidth;
function slide() {
currentIndex++;
if (currentIndex >= slides.length) {
currentIndex = 0;
}
var translateX = -currentIndex * slideWidth;
document.querySelector('.slideshow-container').style.transform = 'translateX(' + translateX + 'px)';
}
setInterval(slide, 3000);
</script>
</body>
</html>
```
这段代码创建了一个包含三张图片的轮播图,每隔3秒钟自动切换到下一张图片。通过设置`translateX`属性来实现无缝衔接的效果。
阅读全文