js+html5全屏手风琴幻灯片图片切换展示特效
时间: 2023-07-30 22:04:35 浏览: 70
好的,以下是使用 JavaScript 和 HTML5 实现全屏手风琴幻灯片图片切换展示特效的代码:
HTML 部分:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全屏手风琴幻灯片图片切换展示特效</title>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#container {
position: relative;
height: 100%;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
bottom: 0;
width: 0;
overflow: hidden;
transition: width 0.5s;
}
.slide.active {
width: 50%;
}
.slide img {
display: block;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<div class="slide active">
<img src="image1.jpg">
</div>
<div class="slide">
<img src="image2.jpg">
</div>
<div class="slide">
<img src="image3.jpg">
</div>
<div class="slide">
<img src="image4.jpg">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
JavaScript 部分:
```javascript
var slides = document.querySelectorAll('.slide');
var currentIndex = 0;
var timer;
// 绑定事件
window.addEventListener('resize', setSlideWidth);
setSlideWidth();
startAutoPlay();
// 设置幻灯片宽度
function setSlideWidth() {
var containerWidth = document.getElementById('container').offsetWidth;
for (var i = 0; i < slides.length; i++) {
if (i === currentIndex) {
slides[i].style.width = containerWidth + 'px';
} else {
slides[i].style.width = (containerWidth / 2) + 'px';
}
}
}
// 开始自动播放
function startAutoPlay() {
timer = setInterval(function() {
currentIndex++;
if (currentIndex >= slides.length) {
currentIndex = 0;
}
setActiveSlide(currentIndex);
}, 3000);
}
// 设置当前激活的幻灯片
function setActiveSlide(index) {
for (var i = 0; i < slides.length; i++) {
if (i === index) {
slides[i].classList.add('active');
} else {
slides[i].classList.remove('active');
}
}
}
// 停止自动播放
function stopAutoPlay() {
clearInterval(timer);
}
```
这段代码使用了 HTML5 中的 `transition` 属性实现了手风琴效果,同时使用 JavaScript 实现了自动播放和手动切换幻灯片的功能。运行这段代码,可以在浏览器中看到全屏手风琴幻灯片图片切换展示特效。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)