以下是一个简单的
jQuery横向时间轴记录册图片切换效果的代码示例：
HTML代码：
```html
<div class="
timeline">
<div class="
timeline-item active">
<img src="image1.jpg" alt="Image 1">
<div class="
timeline-caption">
<h3>Event 1</h3>
<p>Description of event 1</p>
</div>
</div>
<div class="
timeline-item">
<img src="image2.jpg" alt="Image 2">
<div class="
timeline-caption">
<h3>Event 2</h3>
<p>Description of event 2</p>
</div>
</div>
<div class="
timeline-item">
<img src="image3.jpg" alt="Image 3">
<div class="
timeline-caption">
<h3>Event 3</h3>
<p>Description of event 3</p>
</div>
</div>
<div class="
timeline-item">
<img src="image4.jpg" alt="Image 4">
<div class="
timeline-caption">
<h3>Event 4</h3>
<p>Description of event 4</p>
</div>
</div>
</div>
```
CSS代码：
```css
.
timeline {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.
timeline-item {
width: 25%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease;
}
.
timeline-item.active {
transform: translateX(0%);
}
.
timeline-item.next {
transform: translateX(100%);
}
.
timeline-item.prev {
transform: translateX(-100%);
}
.
timeline-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.
timeline-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.8);
padding: 10px;
color: #fff;
}
.
timeline-caption h3 {
margin: 0;
font-size: 1.5em;
}
.
timeline-caption p {
margin: 0;
font-size: 1em;
opacity: 0.8;
}
```
jQuery代码：
```
javascript
$(function() {
var
timelineItems = $('.
timeline-item');
var currentIndex = 0;
var maxIndex =
timelineItems.length - 1;
timelineItems.each(function(index) {
$(this).addClass('position-' + index);
});
function update
Timeline() {
timelineItems.removeClass('active next prev');
timelineItems.eq(currentIndex).addClass('active');
if (currentIndex < maxIndex) {
timelineItems.eq(currentIndex + 1).addClass('next');
} else {
timelineItems.eq(0).addClass('next');
}
if (currentIndex > 0) {
timelineItems.eq(currentIndex - 1).addClass('prev');
} else {
timelineItems.eq(maxIndex).addClass('prev');
}
}
$('.
timeline').swipe({
swipeLeft: function() {
currentIndex = currentIndex < maxIndex ? currentIndex + 1 : 0;
update
Timeline();
},
swipeRight: function() {
currentIndex = currentIndex > 0 ? currentIndex - 1 : maxIndex;
update
Timeline();
}
});
update
Timeline();
});
```
这段代码实现了一个
横向的
时间轴记录册，用户可以通过滑动手势来切换图片和相关的事件描述。每个
时间轴项目都有一个图像和一个标题描述。CSS样式用于对
时间轴进行布局和样式化，而
jQuery代码用于添加交互行为。在
jQuery代码中，我们使用swipe
插件来实现滑动手势，同时我们还定义了一个update
Timeline函数来更新当前显示的
时间轴项目。
扫一扫
3091
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
