个人博客js动态效果代码
时间: 2024-07-17 11:00:41 浏览: 78
创建一个个人博客中的JavaScript动态效果,比如轮播图、响应式菜单或加载更多内容,通常涉及到HTML、CSS和JavaScript的结合使用。这里提供一个简单的例子,展示如何使用JavaScript实现一个简单的轮播图效果:
```html
<!-- HTML -->
<div class="slideshow-container">
<div class="slide">
<img src="image1.jpg" alt="Slide 1">
</div>
<div class="slide">
<img src="image2.jpg" alt="Slide 2">
</div>
<!-- Add more slides as needed -->
</div>
<button id="prevSlide">Previous</button>
<button id="nextSlide">Next</button>
<!-- CSS (for simplicity, just some basic styling) -->
<style>
.slideshow-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slide {
position: absolute;
transition: transform 0.6s ease;
}
</style>
<!-- JavaScript -->
<script>
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
function slideShow() {
slides.forEach((slide, index) => {
slide.style.transform = `translateX(${index * 100%}%)`;
});
const prevButton = document.getElementById('prevSlide');
const nextButton = document.getElementById('nextSlide');
prevButton.addEventListener('click', () => {
if (currentSlide > 0) {
currentSlide--;
animateSlide();
}
});
nextButton.addEventListener('click', () => {
if (currentSlide < slides.length - 1) {
currentSlide++;
animateSlide();
}
});
}
function animateSlide() {
slides[currentSlide].style.transform = 'translateX(0%)';
setTimeout(() => {
slides[currentSlide].style.transform = `translateX(${currentSlide * 100%}%)`;
}, 600);
}
slideShow(); // Start the slideshow on load
</script>
```