demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div class="wrapper" id="wrap">
<img src="./image/0.jpg" alt="">
<img src="./image/2.jpg" alt="">
<img src="./image/5.jpg" alt="">
<img src="./image/6.jpg" alt="">
<img src="./image/13.jpg" alt="">
</div>
<script src="jquery-3.3.1.js"></script>
<!-- 封装插件 -->
<script src="demo.js"></script>
<!-- 调用插件 -->
<script>
$('#wrap').Slider({
curDisplay: 0,
autoPlay: true,
interval: 2000
})
</script>
</body>
</html>
demo.css
* {
margin: 0;
padding: 0;
font-size: 0;
}
.wrapper {
position: relative;
transform-style: preserve-3d;
perspective: 800px;
height: 200px;
margin-top: 200px;
}
.wrapper img {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
border-radius: 8px;
transition: transform 0.8s ease-in-out;
}