82 lines
2.0 KiB
HTML
82 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
|
|
<link rel="stylesheet" href="./swiper.css">
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="swiper-container">
|
|
|
|
<div class="swiper-wrapper" style="transform: translateX(0px);">
|
|
<div class="swiper-slide">
|
|
<img src="https://img.alicdn.com/imgextra/i3/6000000003220/O1CN01XY3FdI1Zeo1AKZyRK_!!6000000003220-0-octopus.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="https://img.alicdn.com/imgextra/i2/6000000008153/O1CN01ApOjk02A67oNUTDKP_!!6000000008153-0-octopus.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 如果需要分页器 -->
|
|
<div class="swiper-pagination"></div>
|
|
|
|
<!-- 如果需要导航按钮 -->
|
|
<div class="swiper-button swiper-button-prev iconfont icon-zuo"></div>
|
|
<div class="swiper-button swiper-button-next iconfont icon-zhankai-copy"></div>
|
|
|
|
</div>
|
|
|
|
<button onclick="test()">点我</button>
|
|
</body>
|
|
|
|
<script src="./swiper.js"></script>
|
|
<script>
|
|
var lb = new Swiper(".swiper-container",{
|
|
loop: false,
|
|
autoPlay: false,
|
|
autoTime: 1000,
|
|
initialSlide: 0,
|
|
speed: 300,
|
|
on: {
|
|
slideChange: (index) => {
|
|
console.log(index)
|
|
}
|
|
}
|
|
})
|
|
|
|
function test() {
|
|
lb.slideTo(2)
|
|
}
|
|
|
|
// function a () {
|
|
// var test = 1;
|
|
// console.log(test) // 1
|
|
//
|
|
// var c = function () {
|
|
// test+=1;
|
|
// console.log(test) //2 2
|
|
// }
|
|
//
|
|
// return c;
|
|
// }
|
|
//
|
|
// var ee = a()
|
|
//
|
|
// ee() // 2
|
|
// ee() // 3
|
|
//
|
|
// // 闭包：函数内部的函数，访问外函数变量的过程
|
|
// // 优点：可以对变量进行缓存，避免重复计算
|
|
// // 缺点：导致内存占用过高，引发卡顿
|
|
|
|
</script>
|
|
</html> |