/* 普通函数 */
/* function fn(){
return 123
}
let a = fn();
console.log(a); */
/* function fn(str){
let msg = str + 'hello'
return msg
}
let a = fn('张三丰') */
/* =>箭头函数后面只有一段表达式代表 return 返回 */
/* let fn = () => 123;
let a = fn();
console.log(a); */
/* 箭头函数只有一个参数()可以省略不写 */
/* 普通函数可以作为构造函数,箭头函数不能作为构造函数不然会报错 */
let fn = (str) =>{
let msg = str +'hello'
return msg
}
let a = fn('张无忌')
console.log(a);
/* 普通函数this谁调用就是谁的,箭头函数没有自己的this,箭头函数的this是上下文 环境的this */
/* let obj1 = {
name:"张三",
fn:function(){
console.log(this)
}
}
let obj2 = {
name:"李四",
} */
/* 普通函数的this可以被call 或apply修改 */
/* obj1.fn.call(obj2) */
/* 一个参数都没有箭头不能省略 */
let obj1 = {
name:"张三",
fn:()=>{
/* 目前的环境下的this是window */
console.log(this);
}
}
let obj2 = {
name:"李四",
}
obj1.fn()/* this指向window 当前上下文环境
箭头函数的this不会被call 或者apply 修改 */
obj1.fn.call(obj2)
总结 箭头函数：没有 this没有 arguments不能使用 new 进行调用
swiper 轮播图
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./imgs/1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./imgs/2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./imgs/3.jpg" alt="">
</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>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
/* Swiper('对应的类名') */
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>
