<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="./css/Carousel.css"/>
<style>
html,body{
margin: 0;
padding: 0;
}
#Carousel{
/* padding-top: 30px;
border-radius: 0.5rem; */
}
</style>
<body>
<div id="Carousel"></div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="./js/Carousel.js"></script>
<script>
var Carousel = new Carousel({
//id
container: "#Carousel",
//宽度
width: 360,
//高度
height: 200,
//是否自动播放（默认为false）
autoplay: true,
//是否显示标记点
danShow: true,
//垂直距离
top:30,
//间隔事件（默认3秒）
duration:3000,
//初始颜色
color:"white",
//选中颜色
selectedColor:"red",
//标记点形状(square(方形),cicular(圆形))
shape:"circular",
//标记点大小
size:5,
//json图片数据
jsonData: [{
"src": "./img/1.jpg"
},
{
"src": "./img/2.jpg"
},
{
"src": "./img/3.jpg"
},
{
"src": "./img/4.jpg"
},
{
"src": "./img/6.jpg"
},
{
"src": "./img/7.jpg"
}
]
})
</script>
简单封装的轮播图插件，包含自动无限循环播放，标记点显示与隐藏，设置间隔时长，配置简单，支持移动端
版权申诉
5星 · 超过95%的资源 23 浏览量
2022-02-07
17:09:43
上传
评论
收藏 1.72MB ZIP 举报 
LBT.zip （12个子文件） 
LBT css 
Carousel.css 29B img 
2.jpg 399KB 1.jpg 268KB 6.jpg 98KB 3.jpg 164KB 5.jpg 134KB 4.jpg 134KB topImg.jpg 489KB 7.jpg 67KB
index.html 1KB js jquery.js 86KB Carousel.js 10KB资源评论
tangfei_1102022-06-11用户下载后在一定时间内未进行评价，系统默认好评。
