<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="https://code.jquery.com/jquery-3.3.1.js"></script>-->
<script type="text/javascript" src="./Carousel_3D.js"></script>
<title>Carousel_3D</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
#carousel1 {
1000px;
height: 300px;
margin: 20px auto;
box-sizing: border-box;
user-select: none;
}
#carousel2 {
1200px;
height: 400px;
margin: 20px auto;
box-sizing: border-box;
user-select: none;
}
#carousel3 {
1400px;
height: 500px;
margin: 20px auto;
box-sizing: border-box;
user-select: none;
}
</style>
</head>
<body>
<div id="carousel1"></div>
<div id="carousel2"></div>
<div id="carousel3"></div>
<script type="text/javascript">
let imgs = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg']
let hrefs = ['www.baidu.com', 'www.baidu.com', 'www.baidu.com', 'www.baidu.com', 'www.baidu.com']
let options = {
imgs: imgs, //图片src组（必需）
hrefs: hrefs, //a标签href 路径
curIndex: 0, //轮播显示的第一张图片index 默认0
autoPlay: false, //默认true
}
$(function () {
$('#carousel1').Carousel_3D(options)
$('#carousel2').Carousel_3D({
imgs: imgs, //图片src组（必需）
hrefs: hrefs, //a标签href 路径
curIndex: 1, //轮播显示的第一张图片index 默认0
autoPlay: true, //默认true
})
$('#carousel3').Carousel_3D({
imgs: imgs, //图片src组（必需）
hrefs: hrefs, //a标签href 路径
curIndex: 2, //轮播显示的第一张图片index 默认0
autoPlay: true, //默认true
interval:4000, // 轮播间隔时间 默认3000
direction: 'turnRight' //轮播方向 向左turnLeft（默认） 或 向右turnRight
})
})
</script>
</body>
</html>