JS自动轮播A、B、C区域的书架信息,提示框信息展示时间为6秒切换
时间: 2024-05-14 18:17:04 浏览: 15
可能的解决方案如下:
1. 使用JavaScript定时器(setInterval)实现轮播功能,每隔一段时间切换到下一张书架信息图片。
2. 使用CSS动画(keyframes)实现提示框信息弹出效果,并设置动画的持续时间为6秒。
3. 将需要展示的书架信息和提示框信息存储在数组中,通过遍历数组实现循环轮播和弹出提示框信息。
4. 在代码中加入注释和适当的变量名,使代码更易于理解和维护。
示例代码如下:
```html
<!-- HTML结构 -->
<div class="carousel">
<div class="carousel-inner">
<img src="bookshelf-a.jpg">
<img src="bookshelf-b.jpg">
<img src="bookshelf-c.jpg">
</div>
</div>
<div class="alert">
<p>提示框信息展示</p>
</div>
<!-- CSS样式 -->
<style>
.carousel {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
.carousel-inner {
width: 1500px;
height: 300px;
position: absolute;
top: 0;
left: 0;
animation: slide 10s infinite;
}
.carousel-inner img {
width: 500px;
height: 300px;
float: left;
}
@keyframes slide {
0% { left: 0; }
33.33% { left: -500px; }
66.66% { left: -1000px; }
100% { left: -1500px; }
}
.alert {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #fff;
border: 1px solid #ccc;
display: none;
}
.alert p {
text-align: center;
line-height: 100px;
}
.alert-show {
display: block;
animation: fadeIn 1s;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opactiy: 1; }
}
</style>
<!-- JavaScript代码 -->
<script>
var bookshelfs = ['bookshelf-a.jpg', 'bookshelf-b.jpg', 'bookshelf-c.jpg'];
var alerts = ['提示框信息A', '提示框信息B', '提示框信息C'];
var carousel = document.querySelector('.carousel');
var carouselInner = document.querySelector('.carousel-inner');
var alertBox = document.querySelector('.alert');
var index = 0;
function showNext() {
var img = document.createElement('img');
img.src = bookshelfs[index];
carouselInner.appendChild(img);
carouselInner.removeChild(carouselInner.children[0]);
index = (index + 1) % bookshelfs.length;
alertBox.innerHTML = '<p>' + alerts[index] + '</p>';
alertBox.classList.add('alert-show');
setTimeout(function() {
alertBox.classList.remove('alert-show');
}, 6000);
}
setInterval(showNext, 5000);
</script>
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![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)