好的，下面是
实现文字轮转
效果的 HTML 代码：
```html
<div class="text-rotate">
<span>第一段文字</span>
<span>第二段文字</span>
<span>第三段文字</span>
</div>
```
接下来是 CSS 代码：
```css
.text-rotate {
display: inline-block;
animation: rotate 6s linear infinite;
}
@keyframes rotate {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-100%);
}
50% {
transform: translateY(-200%);
}
75% {
transform: translateY(-300%);
}
100% {
transform: translateY(0);
}
}
.text-rotate span {
display: block;
}
```
这样就能
实现文字轮转
效果了。
接下来是
实现旋转轮播图+文字内容
切换效果的原生
JS 代码：
```html
<div class="slider-container">
<div class="slider">
<div class="slide">
<img src="image1.jpg" alt="">
<div class="slide-caption">第一张
图片</div>
</div>
<div class="slide">
<img src="image2.jpg" alt="">
<div class="slide-caption">第二张
图片</div>
</div>
<div class="slide">
<img src="image3.jpg" alt="">
<div class="slide-caption">第三张
图片</div>
</div>
</div>
<div class="slider-controls">
<button class="prev-slide">上一张</button>
<button class="next-slide">下一张</button>
</div>
</div>
```
接下来是 CSS 代码：
```css
.slider-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.slide.active {
opacity: 1;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.slider-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.slider-controls button {
padding: 10px;
margin: 0 10px;
font-size: 1.2rem;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.slider-controls button:hover {
background-color: rgba(0, 0, 0, 0.8);
}
```
最后是 JavaScript 代码：
```javascript
const slider = document.querySelector('.slider');
const slides = Array.from(slider.children);
const prevButton = document.querySelector('.prev-slide');
const nextButton = document.querySelector('.next-slide');
const slideWidth = slides[0].getBoundingClientRect().width;
// 设置幻灯片的位置
function setSlidePosition(slide, index) {
slide.style.left = slideWidth * index + 'px';
}
// 设置幻灯片的顺序
slides.forEach(setSlidePosition);
// 移动幻灯片
function moveToSlide(slider, currentSlide, targetSlide) {
slider.style.transform = 'translateX(-' + targetSlide.style.left + ')';
currentSlide.classList.remove('active');
targetSlide.classList.add('active');
}
// 点击按钮移动幻灯片
prevButton.addEventListener('click', function() {
const currentSlide = slider.querySelector('.active');
const prevSlide = currentSlide.previousElementSibling || slides[slides.length - 1];
moveToSlide(slider, currentSlide, prevSlide);
});
nextButton.addEventListener('click', function() {
const currentSlide = slider.querySelector('.active');
const nextSlide = currentSlide.nextElementSibling || slides[0];
moveToSlide(slider, currentSlide, nextSlide);
});
// 自动播放幻灯片
let sliderInterval = setInterval(function() {
const currentSlide = slider.querySelector('.active');
const nextSlide = currentSlide.nextElementSibling || slides[0];
moveToSlide(slider, currentSlide, nextSlide);
}, 5000);
// 鼠标悬停停止自动播放
slider.addEventListener('mouseover', function() {
clearInterval(sliderInterval);
});
// 鼠标离开开始自动播放
slider.addEventListener('mouseout', function() {
sliderInterval = setInterval(function() {
const currentSlide = slider.querySelector('.active');
const nextSlide = currentSlide.nextElementSibling || slides[0];
moveToSlide(slider, currentSlide, nextSlide);
}, 5000);
});
```
这样就能
实现旋转轮播图+文字内容
切换效果了。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1461
