jsp 左右箭头实现图片切换
时间: 2023-07-20 20:15:12 浏览: 81
JSP 是一个用于开发动态Web应用程序的服务器端技术,它本身不直接提供实现图片切换的功能,但可以借助前端技术来实现。
以下是一个基础的 JSP 页面代码示例,实现了左右箭头控制图片切换的功能:
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换</title>
<style>
#slider {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
position: absolute;
top: 0;
left: 0;
width: 300%;
height: 100%;
display: flex;
}
.slider-item {
width: 33.33%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slider-item img {
max-width: 100%;
max-height: 100%;
}
.slider-item.active {
transform: translateX(0%);
}
.slider-item.prev {
transform: translateX(-33.33%);
}
.slider-item.next {
transform: translateX(33.33%);
}
.slider-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
width: 100%;
z-index: 1;
}
.slider-control {
background: rgba(255, 255, 255, 0.5);
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.slider-control span {
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<div id="slider">
<div class="slider-wrapper">
<div class="slider-item active">
<img src="image1.jpg">
</div>
<div class="slider-item">
<img src="image2.jpg">
</div>
<div class="slider-item">
<img src="image3.jpg">
</div>
</div>
<div class="slider-controls">
<div class="slider-control prev">
<span><</span>
</div>
<div class="slider-control next">
<span>></span>
</div>
</div>
</div>
<script>
const slider = document.querySelector('#slider');
const sliderWrapper = slider.querySelector('.slider-wrapper');
const sliderItems = slider.querySelectorAll('.slider-item');
const prevControl = slider.querySelector('.slider-control.prev');
const nextControl = slider.querySelector('.slider-control.next');
let currentIndex = 0;
// 初始化
sliderItems[currentIndex].classList.add('active');
// 左箭头点击事件
prevControl.addEventListener('click', () => {
const prevIndex = currentIndex === 0 ? sliderItems.length - 1 : currentIndex - 1;
sliderItems[prevIndex].classList.add('prev');
sliderWrapper.classList.add('prev');
setTimeout(() => {
sliderItems[prevIndex].classList.add('active');
sliderItems[currentIndex].classList.remove('active');
sliderItems[currentIndex].classList.add('next');
sliderItems[prevIndex].classList.remove('prev');
sliderItems[currentIndex].classList.remove('next');
sliderWrapper.classList.remove('prev');
currentIndex = prevIndex;
}, 500);
});
// 右箭头点击事件
nextControl.addEventListener('click', () => {
const nextIndex = currentIndex === sliderItems.length - 1 ? 0 : currentIndex + 1;
sliderItems[nextIndex].classList.add('next');
sliderWrapper.classList.add('next');
setTimeout(() => {
sliderItems[nextIndex].classList.add('active');
sliderItems[currentIndex].classList.remove('active');
sliderItems[currentIndex].classList.add('prev');
sliderItems[nextIndex].classList.remove('next');
sliderItems[currentIndex].classList.remove('prev');
sliderWrapper.classList.remove('next');
currentIndex = nextIndex;
}, 500);
});
</script>
</body>
</html>
```
这个 JSP 页面代码中嵌入了 HTML、CSS、JavaScript 代码,实现了基础的图片切换效果。你可以根据自己的需求来修改样式和内容。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)