<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 宽度必须设置 高度可以不设置 */
.slider{
width: 800px;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="slider">
</div>
</body>
</html> <script src="./slider.js"></script>
<script>
const slider = new Slider('.slider', {
isAutoPlay: false, // 是否自动轮播
imgList: [], // 图片列表
dotColor: "red", // 点的颜色
dotWidth: 20, // 点的宽度
dotGap: 15, // 点与点之间的间距
dotLineWidth: 2, // 点的外层边框宽度
dotLineColor: "red", // 点边框的颜色
arrowLineWidth: 6, // 箭头的粗细
arrowWidth: 40, // 箭头的宽度
arrowHeight: 60, // 箭头的高度
arrowLineColor: "#fff", // 箭头的颜色
arrowGap: 10, // 箭头距离页面两侧的间距
arrowPadding: 10, // 箭头内部的间距
arrowBgColor: "rgba(0,0,0,0.5)", // 箭头的外层元素背景色
})
</script>