transform-origin变化旋转基点
值：
关键字top、left、right、bottom、center
百分比
数字
两个值：
第一个值——水平方向上的偏移量，关键字选择left right center
第二个值——垂直方向上的偏移量，关键字选择top bottom center
基点在左上角 :
transform-origin:0 0;
transform-origin:left top;
基点在右下角 :
transform-origin:100% 100%;
transform-origin:right bottom;
平移translate(a)
a——水平平移的位置
a>0 水平向右平移
<0 向左平移
=0 保存原生位置不变
translate(a,b)
正正 右下
正负 右上
发现：y轴 向下为正，向上为负！
水平向右平移100px，垂直方向不变
transform: translate(100px,0);
水平不变，垂直方向向下100px
transform: translate(0,100px);
transform: translateX(-100px);
transform: translateY(-100px);
练习：水平向右，垂直向下（两个值：正正）
transform: translate(100px,100px);
注意：不能在同一个元素上添加多个transform，后面的transform会覆盖掉前面的
控制某一轴的平移方向
translateX 水平方向/translateY 垂直方向
transform:scale(a)缩放
a——倍率
一个值：控制水平方向+垂直方向的缩放比例
0<a<1 缩小
a>1 放大
a=0 让元素消失/被隐藏了，但是不会删除元素
a=1 不变
a=-1 大小不变，镜像显示
a<0 负数，倒向
0<|a|<1 缩小
|a|>1 放大
a>1
只控制水平方向放大
transform: scaleX(a);
只控制垂直方向放大
transform: scaleY(a);
两个值:a 水平 b 垂直
transform: scale(a,b);
transform:rotate(a)旋转
a 旋转的角度 单位deg
a>0 顺时针
a<0 逆时针
transform: rotate(10deg);
transform: rotate(-10deg);
绕着x轴的正方向的顺时针旋转
绕着x轴的正方向的逆时针旋转
/* transform: rotateX(30deg); */
/* transform: rotateX(-30deg); */
绕着Y轴的正方向的顺时针旋转
/* transform: rotateY(30deg); */
绕着Y轴的正方向的逆时针旋转
/* transform: rotateY(-30deg); */
transform:skew(a)倾斜
a——角度值，单位是deg
一个值——水平方向的拉伸
两个值——水平方向的拉伸，垂直方向的拉伸
注意：a为负值，代表反向拉伸
保持某一方向不变
1.可以设置该方向为0
2.skewY/skewX 设置
控制某一方向上的拉伸，另一个方向不变
skewX——水平方向的拉伸
skewY——垂直方向的拉伸
/* 水平方向上的拉伸 */
/* transform: skew(10deg); */
/* transform: skew(-10deg); */
/* 保持水平方向拉伸不变，垂直方向拉伸 */
/* transform: skew(0,10deg); */
/* transform: skewY(10deg); */
多个transform属性值的使用
多个transform属性值的使用，可以写在一个transform里面
注意：顺序不同，会导致最后的位置不同！
/* transform: translateX(100px) rotate(10deg) skew(10deg) scale(0.5); */
transform: rotate(10deg) translateX(100px) skew(10deg) scale(0.5);
transition实现过渡动画
/* transition实现过渡动画的效果，把变化的中间部分呈现出来
1-transition-
/* 复合写法: property duration timing-function delay*/
/* transition: all 2s linear; */
/* transition-property设置过渡动画生效的对应css样式属性
值:all_需要变化的所有样式都生效
none_没有样式生效变化效果
property_指定某一个需要变化的css样式属性生效
_需要指定多个变化属性,就用逗号分隔
*/
/* transition-property:width; */
/* transition-property:width,height,background-color; */
transition-property:all;
/* transition-property:none; */
/* 动画变化的持续时间 s/ms*/
/* 如果有多个时间值,会对应到多个property */
/* transition-duration: 2s,5s,10s; */
transition-duration: 2s;
/* 动画变化的延迟时间 */
/* transition-delay: 2s; */
/* 如果有多个时间值,会对应到多个property */
/* transition-delay: 2s,5s,10s; */
/* 动画速度曲线 */
/* transition-timing-function: ease;
transition-timing-function: ease-in; */
/* transition-timing-function: linear; */
transition-timing-function: cubic-bezier(.18,.83,1,.2);
animation复合属性用法
.box{
width: 200px;
height: 200px;
background-color: aqua;
/* 复合属性用法
animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state
*/
animation: gmrun1 10s linear 3s 3 reverse forwards running;
}
/* 设置关键帧 */
@keyframes gmrun1 {
/* 第一种写法 */
from{
/* 最初帧显示的样式 */
width: 200px;
}
to{
/* 最终变化到的帧显示的样式 */
width: 300px;
height: 300px;
background-color: red;
}
}关键帧
/* 设置关键帧 */
@keyframes gmrun1 {
/* 第一种写法 */
from{
/* 最初帧显示的样式 */
width: 200px;
}
to{
/* 最终变化到的帧显示的样式 */
width: 300px;
height: 300px;
background-color: red;
}
}
@keyframes gmrun2 {
/* 第二种写法——分割成几个关键部分 */
0%{
/* 最初帧显示的样式 */
width: 200px;
}
25%{
width: 220px;
height: 250px;
background-color: red;
}
50%{
width: 240px;
height: 250px;
background-color: green;
}
75%{
width: 280px;
height: 280px;
background-color: blue;
}
100%{
/* 最终变化到的帧显示的样式 */
width: 300px;
height: 300px;
background-color: yellow;
}
}animattion属性
.box{
width: 200px;
height: 200px;
background-color: aqua;
/* 关键帧的用法 */
animation: gmrun1 2s linear;
/* 指定要调用的属性名 */
animation-name: gmrun1;
/* 动画持续时间 */
animation-duration: 2s;
/* 动画速度曲线 */
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* 控制最终显示的帧的位置
both 最后一帧+初始帧
forwards 最后一帧
backwards 保留第一帧
*/
animation-fill-mode:forwards;
/* 指定动画演示的次数
infinite 无限循环
*/
animation-iteration-count: 3;
/* 用于js控制动画的暂停与播放
running 播放
paused 暂停
*/
animation-play-state: running;
/* 控制动画的执行方向，一般设置在多次动画实现中
alternate 交替反向运行
reverse 反向
*/
animation-direction: alternate;
}
/* 设置关键帧 */
@keyframes gmrun1 {
/* 第一种写法 */
from{
/* 最初帧显示的样式 */
width: 200px;
}
to{
/* 最终变化到的帧显示的样式 */
width: 300px;
height: 300px;
background-color: red;
}
}animation事件
var box1 = document.querySelector('.box1')
box1.addEventListener('animationstart',function () {
// 动画整体开始，不受循环次数的影响
console.log("动画开始");
})
box1.addEventListener('animationend',function () {
// 动画整体结束，不受循环次数的影响
console.log("动画结束");
})
// 与animation-iteration-count相关
box1.addEventListener('animationiteration',function () {
// 如果动画有循环次数，会在前一次动画结束时执行
console.log("1");
})3D变化
/* 1-构造3D空间 */
transform-style: preserve-3d;
/* 2-构造景深 */
perspective: 100px;
/* 3-观察立体图形的角度 */
/* perspective-origin: 500% 200%; */
child混乱问题
:first-child————找的是.box2的父亲元素big-box真正的第一个元素，实际上应该为box，但此时我们设置的是box2，所以该样式不生效
:first-of-type——寻找.box2的父亲元素big-box的第一个元素类型同.box2相同的元素，实际应该为box，但此时我们设置的是box2，所以该样式不生效
<!-- + 子元素是**不同类型**的排序————————真正位置上的
+ :first-child 匹配**父元素中的第一个子**元素，该元素必须是父元素中 真正的 第一个子元素
+ :last-child 匹配**父元素中的最后一个子**元素， 该元素必须是父元素中 真正的最后一个子元素
+ :nth-child(n) 改变**所有行**数样式，2n+1奇数行，**2n偶**数行，括号里填你要改变的行数；
+ n可以是关键字：**even偶数**，**odd奇数**
+ 子元素是**同类型**间的排序
+ :first-of-type 匹配**父元素中的 同元素类型（div\p\span等） 间的**第一个子元素
+ :last-of-type 匹配**父元素中的 同元素类型（div\p\span等） 间的**最后一个子元素
+ :nth-of-type(n) 匹配**父元素的 同元素类型（div\p\span等） 间的**第n个子元素 -->
animation和transition
1.设置了animation动画——————只要页面加载完成，就会触发效果
2.设置了transition过渡动画____必须要有操作才会触发过渡动画效果，例如通过js方法给box2添加active类名
渐变色
/* 渐变色只会作用域背景图片background-image这个属性 */
/* <!-- 1-线性渐变 -->
参数1——角度/ to 方向
参数2——开始的颜色
参数3——结束的颜色
*/
/* background-image: linear-gradient(to right,red,blue); */
/* background-image: linear-gradient(45deg,red,blue); */
/* <!-- 2-径向渐变 -->
参数——开始颜色,结束颜色
*/
/* background-image: radial-gradient(white,black,white,black) */
/* background-image: radial-gradient(red,blue,green,yellow) */
/* <!-- 3-重复渐变 -->
1. 重复线性渐变
参数1——角度/ to 方向
参数2——第1个颜色 开始位置
参数3——第1个颜色 结束位置
参数4——第2个颜色 开始位置
参数5——第2个颜色 结束位置
2. 重复径向渐变
参数1——第1个颜色 开始位置
参数2——第1个颜色 结束位置
参数3——第2个颜色 开始位置
参数4——第2个颜色 结束位置
*/
/* background-image: repeating-linear-gradient(to right,red 0px, red 10px,blue 0px,blue 30px); */
background-image: repeating-radial-gradient(white 0px, white 10px,black 0px,black 30px);
分栏布局
/* 分栏的数量 */
column-count: 2;
/* 分栏线的样式 */
column-rule: 1px solid red;
/* 以下属性，设置了分栏数就不生效 */
/* 每个栏目内容与分栏线的间距 */
column-gap: 20px;
/* 每个栏目的宽度 */
column-width: 20px;
响应式布局
/* 只要屏幕宽度 < 800px就生效 */
@media screen and (max-width: 800px) {
.box {
background-color: yellow;
}
}
/* 只要屏幕宽度 > 800px就生效 */
@media screen and (min-width: 800px) {
.box {
background-color: red;
}
}
/* 只要屏幕 300px> 宽度 > 600px就生效 */
@media screen and (max-width: 600px) and (min-width: 300px){
.box {
background-color: green;
}
}jQuery
<!-- 使用jQuery -->
<!-- 1-引入jQuery的js文件 -->
<script src="jquery-3.6.3.min.js"></script>
<script>
// 2-jquery基础语法 $('selctor').action()
// selctor————css相关的选择器名
// action()——操作方法、事件函数
console.log($);
//js获取的dom对象
var box = document.querySelector(".box");
console.log(box);
//获取jquery对象——不会局限于数量，返回的都是 数组集合
var $box = $('.box')
console.log($box);
var $box1 = $('.box1')
console.log($box1);
//用jquery的方法获取dom对象
var $boxDom = $('.box')[0]
console.log($boxDom);
var $box1Dom = $('.box1')[1]
console.log($box1Dom);
//用get函数获取jquery的dom对象
//get的参数代表 该元素在jquery数组对象里面的下标
var $boxGet = $('.box').get(0)
console.log($boxGet);
jquery筛选器
// 获取第一个/最后一个
// var $boxFirst = $('.box').first()
// console.log($boxFirst);
// var $boxLast = $('.box').last()
// console.log($boxLast);
// // eq(下标值从0开始)
// var $box4 = $('.box').eq(3)[0]
// console.log($box4);
// 前一个——同级
var $spanPrev = $('.ispan').prev()
console.log($spanPrev);
//前所有——同级，但是出来的数据顺序是倒叙的
var $spanPrevAll = $('.ispan').prevAll()
console.log($spanPrevAll);
console.log($spanPrevAll[0]);
// 后一个——同级
// var $spanPrev = $('.Bspan').next()
// console.log($spanPrev);
// //后所有——同级，出来的数据顺序 顺的
// var $spanPrevAll = $('.Bspan').nextAll()
// console.log($spanPrevAll);
// console.log($spanPrevAll[0]);
// 筛选器8：parent()
console.log($('.span2').parent());
// 筛选器9：parents() _ 找到所有父亲
console.log($('.span2').parents());
// 筛选器10：siblings()_找同级兄弟
console.log($('.span1').siblings());
// 筛选器11：find()_找子级满足条件的元素
console.log($('.box').find('div'));
//筛选器12：index()_找元素的索引
console.log($('.box:nth-child(4)').index());
//筛选器13：closest('B') _ 找到 选择器A 的最近满足条件B的 开始于当前元素 的一个节点
console.log($('.span2').closest('.box'));
console.log($('.span2').closest('div'));
console.log($('.box3').closest('div'));
jquery操作元素
// //html()——同innerHTML()
// console.log($('.box').html());
// 在某个元素内部添加/替换元素
// console.log($('.box').html(`<div>1</div>`));
// // text()——同innerText()
// console.log($('.box').text());
// console.log($('.box').text("123"));
// console.log($('.box').text("<div>1</div>"));
//页面只会显示<div>1</div> 不能进行转换
//val()——读取/修改表单元素的值
console.log($('input').val());
console.log($('input').val("好上加好"));
console.log($('input').val());
// 创建一个jquery对象元素
var myY = $('<div class="box2" style="width: 200px;height:200px;background-color: tomato;">我想添加的盒子</div>')
// 添加元素
// A被添加的元素（父），B添加的元素（子）
//A.append(B)___向A的最后一个子节点添加元素
// $('.box1').eq(0).append(myY)
$('body').append(myY)
//$(B).appendTo(A) B必须通过$来进行操作
//把B添加到A里面
// $(myY).appendTo($('.box1').eq(2))
// myY.appendTo($('.box1').eq(2))
//prepend()——向A的第一个子节点添加元素
// $('body').prepend(myY)
//prependTo()——把$(B)添加到A里
// $(myY).prependTo($('body'))
//向指定的位置前/后添加元素
// before()
// $('.box1').eq(1).before(myY)
// //after()
// $('.box1').eq(1).after(myY)
//insertBefore()/insertAfter()___把。。（子）。。添加到..（父）.里面去
// $(myY).insertBefore($('.box1').eq(1))
// $(myY).insertAfter($('.box1').eq(1))
jquery操作类名
//注意 都不要加 小数点
//hasClass() —— 判断类名是否存在,返回值为 true/false
// console.log($('div').hasClass('box1'));
// addClass()_ 添加类名
// console.log($('div').addClass('box4'));
// removeClass()_删除类名
// console.log($('div').removeClass('box2'));
//toggleClass()
//获取切换按钮——只要原生有当前类名，他就会删除；没有当前类名，就会添加
// console.log($('div').toggleClass('box2'));
jquery操作样式
// // 获取指定样式 .css('样式属性名')
// var box1css = $('.box1').css('width')
// var box1css = $('.box1').css('opacity')
// console.log(box1css);
// // 修改指定样式名的值 .css('样式属性名','值')
// var box2css = $('.box1').css('width','200px')
// console.log(box1css);
// // console.log(box2css);
//通过函数来给样式属性名赋值
//参数1 要修改的样式属性名
// $('.box1').css('width',function (index,v) {
// // //index 每一个下标
// console.log(index);
// // //v 每一个对应的width 的初始值
// console.log(v);
// if (index % 2 == 0) {
// //如果下标 是2的倍数 ，就为其的width改值______通过return返回的就是要修改的值
// return '300px'
// }
// })
//修改多个样式 css({样式1:值,样式2:值})
// $('.box1').eq(0).css({
// width:200,
// 'background-color':'red'
jquery操作属性
// 记得都要带查询/修改的参数
// //attr()
// console.log($('div').attr('class'));//box1
// // 修改原生属性class的值
// console.log($('div').attr('class','box2'));
// console.log($('div').attr('class'));//box2
// console.log($('div').attr('myclass1'));//abc
// // 修改自定义属性myclass1的值
// console.log($('div').attr('myclass1','abcd'));
// console.log($('div').attr('myclass1'));//abcd
//removeAttr()——既可以移出自定义属性，也可以移出原生属性
// console.log($('div').removeAttr('class'));
// console.log($('div').removeAttr('myclass1'));
//prop()——查询到原生属性值，也可以修改原生属性，并且，修改后的原生属性值，会显示在页面的标签中
// console.log($('div').prop('class'));
// console.log($('div').prop('class','box2'));
// // console.log($('div').prop('class'));
// console.log($('div').prop('myclass1'));//不可查询最初自定义的属性值
// console.log($('div').prop('myclass1','abcd'));//修改自定义的属性值，但是不会显示在页面的标签中，只会出现在属性里
// console.log($('div').prop('myclass1'));//获取到修改后的自定义的属性值
//removeProp()——原生属性+原来的自定义属性不可移出
// 只可移出，由prop添加的自定义属性
console.log($('div').removeProp('class'));
console.log($('div').removeProp('myclass1'));
// console.log($('div').prop('myclass3','3333'));//添加属性
// console.log($('div').attr('myclass3','3333'));//添加属性
console.log($('div').removeProp('myclass3'));
jQuery获取元素
// width()/height()
console.log($('div').width());
console.log($('div').height());
// innerWidth()/innerHeight() width+左padding+右padding
console.log($('div').innerWidth());
console.log($('div').innerHeight());
// outerWidth()/outerHeight() width+左boder+右boder+左padding+右padding
console.log($('div').outerWidth());
console.log($('div').outerHeight());
// outerWidth(true)/outerHeight(true) width+左boder+右boder+左padding+右padding +左margin + 右margin
console.log($('div').outerWidth(true));
console.log($('div').outerHeight(true));
jQuery绑定事件on
//基础事件绑定on('监听的事件名click\mouseover',function(){})
// $('.box3').on('click',function () {
// console.log(1111);
// })
//事件委托绑定事件——父委托给子 on('监听的事件名click\mouseover','交给谁委托的选择器',function(){})
// 委托事件完成后，父亲就不会触发事件，而接到委托的选择器才会触发事件
// $(".box2").on("click", ".box3", function () {
// console.log(1111);
// });
// 批量事件绑定 on({事件1:function () {事件1逻辑},事件2:function () {事件2逻辑}})
// $(".box3").on({
// click: function () {
// console.log(1111);
// },
// mouseover: function () {
// console.log(22);
// },
// });
//one()____事件只会触发一次
// $('.box3').on('click',function () {
// console.log(1111);
// })
$('.box3').one('click',function () {
console.log(1111);
})
jQuery常用的事件处理函数
//直接使用
//click('事件处理函数')
//mouseover('事件处理函数')
//mouseout('事件处理函数')
//change('事件处理函数')——————只作用于表单
//hover('事件处理函数')——————移入/移出都会触发的函数
// $('.box3').on('click',function () {
// console.log(1111);
// })
// $('.box3').click(function () {
// console.log(2222);
// })
$('.box3').hover(function () {
console.log(2222);
})
jQuery中的Ajax请求
$.ajax({
//发起/访问的请求地址
url: "https://www.bilibili.com",
//请求方法
method: "GET",
//请求成功时的回调函数
success(res) {
console.log(res);
},
// 请求失败时的回调
error(reason) {
console.error(reason);
},
complete() {
console.log("无论请求成功还是失败，都会调用 complete里面的内容");
},
});canvas的基本使用
// 1-通过原生js获取到canvas
var myCan = document.querySelector('canvas')
//2-构造一个canvas 2D画布空间
var myCont = myCan.getContext('2d')
// 向画布里画图片
// 1-获取图片
var myimg = document.querySelector('img')
//2-监听图片是否加载成功
myimg.addEventListener('load',function () {
//3-图片加载成功后，在画布空间里画图片
myCont.drawImage(myimg,0,0)
})canvas线条的绘制
//1-获取canvas对象
var myCan = document.getElementById('cavs')
//2-获取canvas画布2d空间，就通过它来执行绘制相关的操作
var myCont = myCan.getContext('2d')
//画布，类似于坐标系，坐标原点在左上角，x轴向右为正，y轴向 下！为正
//3-指定绘画的起始位置
myCont.moveTo(200,200)
// 4-指定绘画的结束位置
myCont.lineTo(400,400)
//设置绘画的颜色
myCont.strokeStyle = "red"
//设置线条的宽度
myCont.lineWidth = 10
//设置线条结束端点的样式__square/butt(默认)/round
myCont.lineCap = "round"
//5-执行绘制
myCont.stroke()canvas用线条画图
//多个lineTo
//画倒三角形
//1-获取canvas对象
var myCan = document.getElementById('cavs')
//2-获取canvas画布2d空间，就通过它来执行绘制相关的操作
var myCont = myCan.getContext('2d')
myCont.moveTo(100,100) //确定绘制的起始点
myCont.lineTo(200,100)
myCont.lineTo(150,150)
myCont.lineTo(100,100)
//多个moveTo——起始点有多个
//画正三角
myCont.moveTo(150,150) //确定绘制的起始点
myCont.lineTo(200,200)
myCont.lineTo(100,200)
myCont.lineTo(150,150)
myCont.lineWidth = 10
//此时的两个三角形并没有成独立的个体
myCont.stroke()闭合空间
//beginPath()/closePath()——一对，相当于分区
//1-获取canvas对象
var myCan = document.getElementById('cavs')
//2-获取canvas画布2d空间，就通过它来执行绘制相关的操作
var myCont = myCan.getContext('2d')
//画倒三角形
// 3-beginPath() 真正的开始绘制路径
myCont.beginPath()
//4-确定绘制的起始点
myCont.moveTo(100,100)
//5-确定第1次的结束点
myCont.lineTo(200,100)
//5-确定第2次的结束点
myCont.lineTo(150,150)
//5-确定第3次的结束点——因为有closePath，就不需要再绘制最后一个点
// myCont.lineTo(100,100)
myCont.lineWidth = 10
myCont.strokeStyle = "red"
// 6-closePath() 确定真正的结束绘制路径，会在当前位置绘制一条到起始点的线，真正形成封闭图形
myCont.closePath()
// 7-执行绘制
myCont.stroke()
// //画正三角
// 3-beginPath() 真正的开始绘制路径
myCont.beginPath()
myCont.moveTo(150,150)
myCont.lineTo(200,200)
myCont.lineTo(100,200)
myCont.lineWidth = 20
myCont.strokeStyle = "blue"
// 6-closePath() 确定真正的结束绘制路径，会在当前位置绘制一条到起始点的线，真正形成封闭图形
myCont.closePath()
// 7-执行绘制
myCont.stroke()
swiper
<!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>Document</title>
<link rel="stylesheet" href="swiper-bundle.min.css" />
<style>
/* 4-调节swiper大小 */
.swiper {
width: 600px;
height: 300px;
border: 1px solid red;
/* --swiper-theme-color: yellow; */
}
/* 如果开启了loop循环，需要注意顺序！ */
.swiper-slide:nth-child(2),
.swiper-slide:nth-child(5) {
background-color: antiquewhite;
}
.swiper-slide:nth-child(3) {
width: 100px;
height: 100px;
background-color: aqua;
}
.swiper-slide:nth-child(1),
.swiper-slide:nth-child(4) {
background-color: aquamarine;
}
/* 默认未选中的样式名 */
.swiper-pagination-bullet {
background: #ff6600;
opacity: 1;
}
/* 自定义选中的样式名以及样式 */
.my-bullet-active {
background: yellow;
opacity: 1;
width: 20px;
}
.my-button-disabled {
background-color: blueviolet;
}
</style>
</head>
<body>
<!-- 2-搭建swiper框架 -->
<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>
</body>
<script src="swiper-bundle.min.js"></script>
<script>
// 3-初始化swiper
var mySwiper = new Swiper(".swiper", {
direction: "horizontal", // vertical垂直切换选项 horizontal水平方向
effect: "fade", //设置切换效果 fade淡入
fadeEffect: {
//一般用于内部元素大小不一致,一般情况是开启状态,true
//false就不能隐藏前一个元素
crossFade: true,
},
autoplay: true, //开启自动播放
// loop: true, // 循环模式选项，第一个Slide和最后一个Slide，都会被复制一份,操作的时候要注意控制真实的+复制的
//定义的是 a b c
//实际网页中需要操作的 c a b c a
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
//如果需要修改被选中状态的样式与未选中状态的样式——建议，选中状态的样式名写在未选中状态的后面，不然会被覆盖掉
bulletActiveClass: "my-bullet-active",
},
// 如果需要前进后退按钮---导航按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
// 自定义前进后退按钮不可用时的样式名
disabledClass: "my-button-disabled",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
// on监听事件
on: {
slideChangeTransitionEnd: function () {
if (this.isEnd) {
this.navigation.$nextEl.css("display", "none");
} else {
this.navigation.$nextEl.css("display", "block");
}
},
click: function (s) {
console.log(s);
this.navigation.$prevEl.css("display", "none");
this.navigation.$nextEl.css("display", "none");
},
},
});
</script>
</html>
swiper事件
// on监听事件--写在配置项里面————文档--配置选项--events
// 只能写封装好的事件
on: {
// 初始化后执行
init: function () {
// console.log(11);
},
// 切换事件---松开鼠标时会发生的效果
//不分前后、左右切换
slideChangeTransitionEnd: function () {
//切换完成事件
},
slideChangeTransitionStar: function () {
//切换开始事件
},
//分前后、左右切换
slidePrevTransitionStart: function () {
// alert(111);
},
slideNextTransitionStart: function () {
// alert(222);
},
// 点击事件
click: function () {
// alert("你点了Swiper");
},
//触发开始事件——只要碰到了就会生效
touchStart: function (swiper, event) {
// alert("事件触发了;");
},
},
});
//on调用事件方法--直接写在外面
mySwiper.on('click',function () {
console.log("我点击事件在外面");
})
mySwiper.on('reachEnd',function(){
alert('到了最后一个slide');
})
//有些事件没有被封装就需要自己写，通过mySwiper.el调用
// 移入移出事件
mySwiper.el.onmouseover = function () {
// 用js控制按钮显示和隐藏——找到按钮——mySwiper.navigation.$nextEl/$prevEl
mySwiper.navigation.$nextEl.css('display','block')
mySwiper.navigation.$prevEl.css('display','block')
}
mySwiper.el.onmouseout = function () {
// 用js控制按钮显示和隐藏——找到按钮——mySwiper.navigation.$nextEl/$prevEl
mySwiper.navigation.$nextEl.css('display','none')
mySwiper.navigation.$prevEl.css('display','none')
}
1925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
