使用js实现自动轮播
时间: 2023-07-20 11:19:54 浏览: 59
好的,下面是一个简单的使用 JavaScript 实现自动轮播的示例代码:
HTML 代码:
```html
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
```
CSS 代码:
```css
.slider {
width: 600px;
height: 400px;
overflow: hidden;
}
.slider img {
width: 100%;
height: 100%;
display: block;
float: left;
}
```
JavaScript 代码:
```javascript
var slider = document.querySelector('.slider');
var images = document.querySelectorAll('.slider img');
var currentIndex = 0;
var interval;
function start() {
interval = setInterval(function() {
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('active');
}, 2000);
}
function stop() {
clearInterval(interval);
}
slider.addEventListener('mouseenter', stop);
slider.addEventListener('mouseleave', start);
start();
```
这段代码会选中 HTML 中的 `.slider` 元素和其中包含的所有 `img` 元素,并且设置一个计时器,每隔 2 秒钟切换当前显示的图片。当鼠标移动到 `.slider` 元素上时,计时器会停止,移开后会重新开始。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)