vscode轮播图代码
时间: 2023-12-07 14:38:43 浏览: 267
以下是一个基本的VSCode轮播图代码,包括数字按钮控制轮播和鼠标划入图片时出现箭头来控制图片滑动的功能。请注意,这只是一个基本的代码框架,您可以根据需要进行修改和优化。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VSCode轮播图</title>
<style>
/* 轮播图容器 */
#slider {
width: 600px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/* 图片容器 */
#slider .slider-img {
width: 6000px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
/* 图片 */
#slider .slider-img img {
float: left;
width: 600px;
height: 400px;
}
/* 数字按钮容器 */
#slider .slider-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
/* 数字按钮 */
#slider .slider-nav span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
}
/* 当前数字按钮 */
#slider .slider-nav span.active {
background-color: #f00;
}
/* 左右箭头容器 */
#slider .slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
cursor: pointer;
}
/* 左箭头 */
#slider .slider-arrow .arrow-left {
left: 20px;
}
/* 右箭头 */
#slider .slider-arrow .arrow-right {
right: 20px;
}
/* 箭头图标 */
#slider .slider-arrow i {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #fff;
border-top: none;
border-right: none;
transform: rotate(-45deg);
margin-top: -10px;
margin-left: -10px;
}
/* 鼠标悬停时显示箭头 */
#slider:hover .slider-arrow {
display: block;
}
</style>
</head>
<body>
<div id="slider">
<div class="slider-img">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
</div>
<div class="slider-nav">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="slider-arrow">
<div class="arrow-left">
<i></i>
</div>
<div class="arrow-right">
<i></i>
</div>
</div>
</div>
<script>
// 获取元素
var slider = document.getElementById('slider');
var sliderImg = slider.getElementsByClassName('slider-img')[0];
var sliderNav = slider.getElementsByClassName('slider-nav')[0];
var sliderNavSpan = sliderNav.getElementsByTagName('span');
var sliderArrow = slider.getElementsByClassName('slider-arrow')[0];
var sliderArrowLeft = sliderArrow.getElementsByClassName('arrow-left')[0];
var sliderArrowRight = sliderArrow.getElementsByClassName('arrow-right')[0];
var index = 0; // 当前显示的图片的索引
var timer = null; // 定时器
// 自动轮播
function autoPlay() {
timer = setInterval(function() {
index++;
if (index >= sliderNavSpan.length) {
index = 0;
}
changeImg();
}, 2000);
}
autoPlay();
// 切换图片
function changeImg() {
sliderImg.style.left = -index * 600 + 'px';
for (var i = 0; i < sliderNavSpan.length; i++) {
sliderNavSpan[i].className = '';
}
sliderNavSpan[index].className = 'active';
}
// 鼠标悬停时停止轮播,显示箭头
slider.onmouseover = function() {
clearInterval(timer);
sliderArrow.style.display = 'block';
}
// 鼠标移开时继续轮播,隐藏箭头
slider.onmouseout = function() {
autoPlay();
sliderArrow.style.display = 'none';
}
// 点击数字按钮切换图片
for (var i = 0; i < sliderNavSpan.length; i++) {
sliderNavSpan[i].index = i;
sliderNavSpan[i].onclick = function() {
index = this.index;
changeImg();
}
}
// 点击左箭头切换到上一张图片
sliderArrowLeft.onclick = function() {
index--;
if (index < 0) {
index = sliderNavSpan.length - 1;
}
changeImg();
}
// 点击右箭头切换到下一张图片
sliderArrowRight.onclick = function() {
index++;
if (index >= sliderNavSpan.length) {
index = 0;
}
changeImg();
}
</script>
</body>
</html>
```
阅读全文