bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/index.html Normal file
View File

@@ -0,0 +1,165 @@
<!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">
<style>
.swiper-container {
width: 520px;
height: 280px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
.swiper-pagination {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
display: flex;
justify-content: center;
}
.swiper-pagination-item {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
margin-right: 10px;
cursor: pointer;
}
.swiper-wrapper {
display: flex;
}
.swiper-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
cursor: pointer;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
.active {
background: red;
}
.dh {
transition-duration: 300ms;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper dh" 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>
<!-- 如果需要分页器 -->
<div class="swiper-pagination">
<div class="swiper-pagination-item active"></div>
<div class="swiper-pagination-item"></div>
<div class="swiper-pagination-item"></div>
</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>
</body>
<script>
var pagination = _(".swiper-pagination .swiper-pagination-item");
var timer;
// 上一页
$(".swiper-button-prev").onclick = function () {
motion(520,'prev')
}
// 下一页
$(".swiper-button-next").onclick = function () {
motion(-520,'next')
}
// 运动
function motion(offset, type) {
var totalDistance = translateX() + offset;
if (totalDistance < -1040) {
totalDistance = 0
}
if (totalDistance > 0) {
totalDistance = -1040
}
SetTranslateX(totalDistance)
// 要去的下一页的下标
var index = Math.abs(totalDistance / 520)
changePagination(index)
}
// 小圆点点击切换轮播图
pagination.forEach((v,i) => {
v.onclick = () => {
changePagination(i)
}
});
function changePagination(i) {
pagination.forEach(item => item.classList.remove("active"))
pagination[i].classList.add("active")
SetTranslateX(i * -520)
}
// 让图片移动
function SetTranslateX(distance) {
$(".swiper-wrapper").style.transform = `translateX(${distance}px)`
}
function AutoPlay() {
timer = setInterval(() => {
$(".swiper-button-next").onclick()
},1000)
}
$(".swiper-container").onmouseover = function () {
clearInterval(timer)
}
$(".swiper-container").onmouseleave = function () {
AutoPlay()
}
AutoPlay()
// 返回元素上的距离
function translateX() {
return Number($(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)px\)/)[1])
}
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>

45
历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/swiper.css Normal file
View File

@@ -0,0 +1,45 @@
.swiper-container {
width: 520px;
height: 280px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
.swiper-pagination {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
display: flex;
justify-content: center;
}
.swiper-pagination-item {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
margin-right: 10px;
cursor: pointer;
}
.swiper-wrapper {
display: flex;
}
.swiper-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
cursor: pointer;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
.active {
background: red;
}
.dh {
transition-duration: 300ms;
}

82
历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/swiper.html Normal file
View File

@@ -0,0 +1,82 @@
<!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>

204
历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/swiper.js Normal file
View File

@@ -0,0 +1,204 @@
// 自执行函数
// 闭包
(function () {
class Swiper {
config = {
timer: null,
el: '.swiper-container',
width: () => {
return document.querySelector(this.config.el).offsetWidth
},
maxLength: () => {
return document.querySelectorAll(".swiper-slide").length;
},
maxWidth: () => {
return (this.config.maxLength() - 1) * this.config.width()
},
loop: false,
autoPlay: false,
autoTime: 3000,
initialSlide: 0,
speed: 300,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
fx: true,// true 表示向下，false向上奏
on: {}
}
constructor(el, option) {
if (typeof el != "string" || el.length == 0 || document.querySelector(el) == null) {
throw new Error("el参数必传，需要是字符串，并且 选择器需要存在")
}
this.config.el = el;
this.config.loop = option.loop || this.config.loop;
this.config.autoPlay = option.autoPlay || this.config.autoPlay;
this.config.autoTime = option.autoTime || this.config.autoTime;
this.config.initialSlide = option.initialSlide || this.config.initialSlide;
this.config.speed = option.speed || this.config.speed;
this.config.navigation.prevEl = option?.navigation?.prevEl || this.config.navigation.prevEl;
this.config.navigation.nextEl = option?.navigation?.nextEl || this.config.navigation.nextEl;
this.config.pagination.el = option?.pagination?.el || this.config.pagination.el;
this.config.on = option?.on || this.config.on;
console.log( this.config)
this.init();
}
init () {
this.BindNext();
this.BindPrev();
this.createdPagination();
// 设置默认显示第几章图
this.SetTranslateX(this.config.initialSlide * -this.config.width())
this.changePagination(this.config.initialSlide)
// 设置轮播图切换的动画
this.$(".swiper-wrapper").style.transitionDuration = `${this.config.speed}ms`
if (this.config.autoPlay) {
this.AutoPlay();
this.$(this.config.el).onmouseover = () => clearInterval(this.config.timer)
this.$(this.config.el).onmouseleave = () => this.AutoPlay()
}
}
BindNext() {
this.$(this.config.navigation.nextEl) != null
? this.$(this.config.navigation.nextEl).onclick = () => {
this.motion(-this.config.width())
}
: ''
}
BindPrev() {
this.$(this.config.navigation.prevEl) != null
? this.$(this.config.navigation.prevEl).onclick = () => {
this.motion(this.config.width())
}
: ''
}
motion(offset) {
var totalDistance = this.translateX() + offset;
if (!this.config.loop) {
if (totalDistance == -this.config.maxWidth()) {
console.log("移动到最后一张图了")
this.$(this.config.navigation.nextEl).onclick = null;
} else {
this.BindNext();
}
if (totalDistance == 0) {
console.log("移动到第一张图了")
this.$(this.config.navigation.prevEl).onclick = null
} else {
this.BindPrev()
}
}
if (totalDistance < -this.config.maxWidth()) {
totalDistance = 0
}
if (totalDistance > 0) {
totalDistance = -this.config.maxWidth()
}
this.SetTranslateX(totalDistance)
// 要去的下一页的下标
var index = Math.abs(totalDistance / this.config.width())
this.changePagination(index)
}
// 生成小圆点
createdPagination() {
if (this.$(this.config.pagination.el) != null ) {
for (var i = 0; i < this.config.maxLength(); i++) {
this.$(this.config.pagination.el).innerHTML+= `
<div class="swiper-pagination-item ${i == 0 ? 'active' : ''}"></div>
`
};
this.bindPaginationClick();
}
}
bindPaginationClick() {
var itemAll = this._(".swiper-pagination-item")
itemAll.forEach((v,i)=> {
v.onclick = () => {
this.BindNext();
this.BindPrev();
this.changePagination(i)
}
})
}
changePagination(i) {
this.config.on.hasOwnProperty("slideChange") ? this.config.on?.slideChange(i) : ''
var pagination = this._(".swiper-pagination-item")
if (pagination.length != 0) {
pagination.forEach(item => item.classList.remove("active"))
pagination[i].classList.add("active")
this.SetTranslateX(i * -this.config.width())
}
}
slideTo(index) {
this.SetTranslateX(index * -this.config.width())
this.changePagination(index)
}
AutoPlay() {
this.config.timer = setInterval(() => {
if (this.config.loop) {
this.$(this.config.navigation.nextEl).onclick()
} else {
if (this.translateX() / -this.config.width() >= this.config.maxLength()-1) {
this.config.fx = false
this.motion(this.config.width())
} else {
if (this.config.fx) {
this.motion(-this.config.width())
} else {
this.motion(this.config.width())
if (this.translateX() / -this.config.width() == 0) {
this.config.fx = true
}
}
}
}
},this.config.autoTime)
}
translateX() {
return Number(this.$(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)px\)/)[1])
}
SetTranslateX(distance) {
this.$(".swiper-wrapper").style.transform = `translateX(${distance}px)`
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
window.Swiper = Swiper
})()

47
历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/笔记.txt Normal file
View File

@@ -0,0 +1,47 @@
实现的功能：
自定义参数：
1：loop: false // 循环模式选项
【完成】2：自动播放
autoPlay: true // false 【完成】
autoTime: 3(默认) 用户可以自定义 【完成】
【完成】3：是否需要前进后退按钮
如果需要
1：写上html
2：
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
【完成】4：是否需要小圆点
如果需要
1：写上html
2：
pagination: {
el: '.swiper-pagination',
},
【完成】5：initialSlide: 0(默认) 设置显示第几张图
【完成】6：speed: 300(默认) 设置图片切换的速度
功能（方法）：
1：slideChange() 轮播图切换的时候，调用这个方法，返回下标
new Swiper('.swiper-container',{
on:{
slideChange: function(){
alert('改变了，activeIndex为'+this.activeIndex);
},
},
})
mySwiper.on('slideChange', function () {
//...
});
2：slideTo(index) 传入参数，切换轮播图