<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#outer{
width: 500px;
margin: 50px auto;
background-color: skyblue;
padding: 15px;
text-align: center;
}
img{
width: 100%;
}
</style>
<script>
window.onload = (()=>{
//点击按钮切换图片
//获取按钮
var prev = document.getElementById('prev');
var next = document.getElementById('next');
//获取img标签
var img = document.getElementsByTagName('img')[0];
//创建一个数组,用来保存图片的路径
var imgArr = ['img/print2.jpg','img/print3.jpg',"img/print1.png"];
//创建一个变量,来保存当前正在显示的图片索引
var index = 0;
//获取提示文字
var info = document.getElementById('info')
info.innerHTML = `一共${imgArr.length}图片,当前第${index+1}张`;
//分别为两个按钮绑定点击事件
prev.onclick=(()=>{
// alert('做')
//切换图片就是切换img的src属性
index--;
if(index < 0 ){
index = imgArr.length-1
}
img.src = imgArr[index];
info.innerHTML = `一共${imgArr.length}图片,当前第${index+1}张`;
})
next.onclick=(()=>{
index++;
if(index>imgArr.length-1){
index = 0
}
img.src = imgArr[index];
})
})
</script>
</head>
<body>
<div id="outer">
<p id='info'></p>
<img src="img/print1.png" alt="">
<button id='prev'>上一张</button>
<button id='next'>下一张</button>
</div>
</body>
</html>```
用js实现一个简易的轮播图
于 2021-02-25 16:17:59 首次发布