一、定时器
1.什么是定时器?
JavaScript中提供一定是时间之后触发的功能,就叫做定时器。
2.JS的两种定时器
setTimeout函数
window.setTimeout(调用函数,[延迟毫秒数]);
function myFunction()
{
setTimeout(function(){alert("Hello")},3000);
}
注意:只会执行一次
setInterval函数
window. setInterval(调用函数,[延迟毫秒数]);
setInterval(function(){
var index = Math.floor(Math.random()*8);
div.style.backgroundColor = str[index];
console.log(str[index])
},2000)//2秒调用一次
注意:反复执行,每隔一个定时时间,就会执行一次
3.取消定时器
clearTimeout(timeoutID)方法
var va = setTimeout(function(){
.......
},1000);
clearTimeout(va);
clearInterval(intervalID)方法
var vc = setInterval(function(){
.......
},1000)
clearInterval(vc);
二、Swiper
1.什么是Swiper?
swiper是一款开源的解决前端开发中触摸滑动案例的插件。常用于移动端网站的内容触摸滑动,能实现轮播图、触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
2.使用方法
Swiper中文网——>获取Swiper——>下载相应版本
1.首先加载插件,需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件,不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
...
<script src="dist/js/swiper-bundle.min.js"></script>
...
</body>
</html>
2.添加HTML内容。Swiper7的默认容器是'.swiper',Swiper6之前是'.swiper-container'。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在Swiper容器之外
3.你可能想要给Swiper定义一个大小,当然不要也行。
.swiper {
width: 600px;
height: 300px;
}
4.初始化Swiper。
<script>
var mySwiper = new Swiper ('.swiper', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
5.完成。恭喜你,现在你的Swiper应该已经能正常切换了。
如果作为CommonJs 或ES 模块引入
//CommonJs
var Swiper = require('swiper');
var mySwiper = new Swiper('.swiper', { /* ... */ });
//ES
import Swiper from 'swiper';
var mySwiper = new Swiper('.swiper', { /* ... */ });