使用js代码实现网页轮播图,每次切换一张停留2秒自动切换下一张,还带有左右切换的箭头按钮
时间: 2023-12-26 17:04:14 浏览: 56
好的,下面是一个简单的实现示例:
HTML代码:
```html
<div class="slider">
<div class="slider-img">
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">
</div>
<div class="slider-arrow">
<span class="prev"><</span>
<span class="next">></span>
</div>
</div>
```
CSS代码:
```css
.slider {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
.slider-img {
position: absolute;
width: 1800px;
height: 400px;
}
.slider-img img {
float: left;
width: 600px;
height: 400px;
}
.slider-arrow {
position: absolute;
top: 50%;
margin-top: -15px;
width: 100%;
height: 30px;
text-align: center;
}
.slider-arrow span {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 20px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.slider-arrow span:hover {
opacity: 1;
}
.slider-arrow .prev {
float: left;
margin-left: 30px;
}
.slider-arrow .next {
float: right;
margin-right: 30px;
}
```
JS代码:
```js
var sliderImg = document.querySelector(".slider-img");
var imgs = document.querySelectorAll(".slider-img img");
var arrowPrev = document.querySelector(".prev");
var arrowNext = document.querySelector(".next");
var index = 0;
var timer = null;
// 切换图片
function changeImg() {
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}
imgs[index].style.display = "block";
}
// 下一张图片
function nextImg() {
index++;
if (index >= imgs.length) {
index = 0;
}
changeImg();
}
// 上一张图片
function prevImg() {
index--;
if (index < 0) {
index = imgs.length - 1;
}
changeImg();
}
// 自动切换图片
function autoPlay() {
timer = setInterval(function() {
nextImg();
}, 2000);
}
// 鼠标移入暂停自动切换,移出继续自动切换
sliderImg.onmouseover = function() {
clearInterval(timer);
}
sliderImg.onmouseout = function() {
autoPlay();
}
// 点击箭头切换图片
arrowPrev.onclick = function() {
prevImg();
}
arrowNext.onclick = function() {
nextImg();
}
// 初始化
changeImg();
autoPlay();
```
上面的代码实现了一个简单的网页轮播图,每次切换一张停留2秒自动切换下一张,还带有左右切换的箭头按钮。