64 lines
1.3 KiB
HTML
64 lines
1.3 KiB
HTML
<!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>轮播图</title>
|
|
<link rel="stylesheet" href="./swiper.css">
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
<div class="swiper-container">
|
|
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper_item">
|
|
<img src="https://img.alicdn.com/imgextra/i1/6000000008079/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" alt="">
|
|
</div>
|
|
<div class="swiper_item">
|
|
<img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
|
|
</div>
|
|
<div class="swiper_item">
|
|
<img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action">
|
|
<div class="but prev"> < </div>
|
|
<div class="but next"> > </div>
|
|
</div>
|
|
|
|
<ul class="dot"></ul>
|
|
|
|
</div>
|
|
|
|
<button onclick="test()">点我</button>
|
|
|
|
|
|
</body>
|
|
<script src="swiper.js"></script>
|
|
<script>
|
|
var a = new swiper('.swiper-container', {
|
|
autoPlay: false,
|
|
autoTime: 3000,
|
|
navigation: {
|
|
nextEl: '.next',
|
|
prevEl: '.prev',
|
|
},
|
|
pagination: {
|
|
el: ".dot",
|
|
},
|
|
})
|
|
|
|
a.on('slideChange', function (index) {
|
|
console.log(index)
|
|
})
|
|
|
|
function test () {
|
|
a.slideTo(2)
|
|
}
|
|
|
|
</script>
|
|
</html> |