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

BIN
历届学生/逯帅帅/项目开发/上课项目/swiper/img/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
历届学生/逯帅帅/项目开发/上课项目/swiper/img/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
历届学生/逯帅帅/项目开发/上课项目/swiper/img/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

186
历届学生/逯帅帅/项目开发/上课项目/swiper/index.html Normal file
View File

@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.swiper {
width: 520px;
height: 280px;
overflow: hidden;
margin: 10% auto;
position: relative;
}
.swiper-wrapper {
display: flex;
}
.swiper-wrapper img {
width: 520px;
height: 280px;
}
.swiper-button {
position: absolute;
top: 50%;
color: #fff;
font-size: 23px;
padding: 5px 5px;
background: #00000075;
transform: translateY(-50%);
}
.prev {
left: 0;
}
.next {
right: 0;
}
.swiper-pagination {
display: flex;
position: absolute;
left: 50%;
bottom: 16px;
transform: translate(-50%);
}
.swiper-pagination li {
width: 8px;
height: 8px;
border-radius: 100%;
background: #CCC;
margin-right: 5px;
}
.swiper-pagination .active {
background: #007aff !important;
}
</style>
</head>
<body>
<div class="swiper">
<ul class="swiper-wrapper" style="transform: translateX(0px);">
<li>
<img src="img/1.jpg" alt="">
</li>
<li>
<img src="img/2.jpg" alt="">
</li>
<li>
<img src="img/3.jpg" alt="">
</li>
</ul>
<!-- 如果需要分页器 -->
<ul class="swiper-pagination">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<!--上一页-->
<div class="swiper-button prev">&lt;</div>
<!--下一页-->
<div class="swiper-button next">&gt;</div>
</div>
</body>
<script>
var prev = $(".swiper .prev"),
next = $(".next"),
swiper = $(".swiper"),
pagination = $(".swiper .swiper-pagination li"),
timer = null;
prev.onclick = function () {
animation(520)
}
next.onclick = function () {
animation(-520)
}
function animation(offset) {
var val = parseInt($(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)\)/)[1]);
var newOffset = offset + val;
if (newOffset > 0) {
newOffset = -1040;
}
if (newOffset < -1040) {
newOffset = 0;
}
changePagination(Math.abs(newOffset / 520))
$(".swiper-wrapper").style.transform = `translateX(${newOffset}px)`;
}
function PaginationClick() {
pagination.forEach(function (v,i) {
v.onclick = function () {
changePagination(i)
}
})
}
function changePagination(i) {
pagination.forEach(function (item) {
item.className = ""
});
pagination[i].className = "active";
$(".swiper-wrapper").style.transform = `translateX(${i * -520}px)`;
}
function autoPlay() {
timer = setInterval(function () {
next.onclick()
},1000);
}
PaginationClick();
autoPlay()
swiper.onmouseover = function () {
clearInterval(timer)
}
swiper.onmouseout = function () {
autoPlay()
}
function $(className) {
var newClassName = className.split(" ");
if (newClassName.length > 1) {
var father = newClassName[newClassName.length - 2];
var childrenList = document.querySelector(father).children;
var arr = Array.from(childrenList).filter(function (el){
if (
el.className.indexOf( (newClassName[newClassName.length-1]).replace(".", "") ) > -1
||
el.tagName.toLowerCase() == newClassName[newClassName.length-1]
) {
return el;
}
});
if (arr.length > 1) {
return document.querySelectorAll(className)
} else if (arr.length == 1){
return document.querySelector(className)
} else {
throw new Error(`${className} 不存在，请检查`)
}
} else {
return document.querySelector(newClassName);
}
}
</script>
</html>

72
历届学生/逯帅帅/项目开发/上课项目/swiper/plug.html Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="swiper.css">
</head>
<body>
<div class="swiper">
<ul class="swiper-wrapper" style="transform: translateX(0px);">
<li>
<img src="img/1.jpg" alt="">
</li>
<li>
<img src="img/2.jpg" alt="">
</li>
<li>
<img src="img/3.jpg" alt="">
</li>
</ul>
<!-- 如果需要分页器 -->
<ul class="swiper-pagination"></ul>
<!--上一页-->
<div class="swiper-button prev">&lt;</div>
<!--下一页-->
<div class="swiper-button next">&gt;</div>
</div>
<button>点我</button>
</body>
<script src="swiper.js"></script>
<script>
var lbo = new lb(".swiper",{
time: 1000,
initialSlide: 0,
loop: false,
speed: 300,
autoplay: false,
grabCursor: true,
// on: {
// slideChange: function (index) {
// console.log(index);
// },
// startChange: function (index) {
// console.log(this.index);
// },
// },
});
// lbo.on('slideChange', function (index) {
// console.log(index)
// });
//
// lbo.on('startChange', function (index) {
// console.log(index)
// });
document.querySelector("button").onclick = () => {
lbo.slideTo(2);
}
</script>
</html>

54
历届学生/逯帅帅/项目开发/上课项目/swiper/swiper.css Normal file
View File

@@ -0,0 +1,54 @@
body,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.swiper {
width: 520px;
height: 280px;
overflow: hidden;
margin: 10% auto;
position: relative;
}
.swiper-wrapper {
display: flex;
}
.swiper-wrapper li {
flex-shrink: 0;
}
.swiper-wrapper img {
width: 100%;
height: 100%;
}
.swiper-button {
position: absolute;
top: 50%;
color: #fff;
font-size: 23px;
padding: 5px 5px;
background: #00000075;
transform: translateY(-50%);
}
.prev {
left: 0;
}
.next {
right: 0;
}
.swiper-pagination {
display: flex;
position: absolute;
left: 50%;
bottom: 16px;
transform: translate(-50%);
}
.swiper-pagination li {
width: 8px;
height: 8px;
border-radius: 100%;
background: #CCC;
margin-right: 5px;
}
.swiper-pagination .active {
background: #007aff !important;
}

216
历届学生/逯帅帅/项目开发/上课项目/swiper/swiper.js Normal file
View File

@@ -0,0 +1,216 @@
// 保护
(function () {
var defaultOption = {
el: '.swiper',
width () {
return $(defaultOption.el).clientWidth
},
timer: null,
time: 3000,
initialSlide: 0,
direction: 'vertical',
speed: 800,
grabCursor: false,
loop: false,
autoplay: false,
swiperWrapper: '.swiper-wrapper',
on: {
},
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.next',
prevEl: '.prev',
},
// 事件控制中心，主要保存事件的
eventList: {}
}
// 类的构造函数
function swiper (el,option) {
if (typeof el == "string") {
defaultOption.el = el || defaultOption.el;
defaultOption.time = option.time || defaultOption.time;
defaultOption.initialSlide = option.initialSlide || defaultOption.initialSlide;
defaultOption.direction = option.direction || defaultOption.direction;
defaultOption.speed = option.speed || defaultOption.speed;
defaultOption.grabCursor = option.grabCursor || defaultOption.grabCursor;
defaultOption.loop = option.loop || defaultOption.loop;
defaultOption.autoplay = option.autoplay || defaultOption.autoplay;
if (option.hasOwnProperty("pagination")) {
defaultOption.pagination.el = option.pagination.el || defaultOption.pagination.el;
}
if (option.hasOwnProperty("navigation")) {
defaultOption.navigation.nextEl = option.navigation.nextEl || defaultOption.navigation.nextEl;
defaultOption.navigation.prevEl = option.navigation.prevEl || defaultOption.navigation.prevEl;
}
if (option.hasOwnProperty("on")) {
for (const key in option.on) {
defaultOption.on[key] = option.on[key]
}
}
console.log(defaultOption)
this.next = $(defaultOption.navigation.nextEl);
this.wrapper = $(defaultOption.swiperWrapper);
this.prev = $(defaultOption.navigation.prevEl);
this.pagination = $(defaultOption.pagination.el);
this.el = $(defaultOption.el);
this.init();
} else {
throw new Error("最外层父节点的类名必传")
}
}
// 类的方法
swiper.prototype = {
init () {
this.CreatedPagination();
this.setInitialSlide();
this.setGrabCursor();
if (defaultOption.autoplay) {
this.autoPlay();
this.el.onmouseover = () => clearInterval(defaultOption.timer);
this.el.onmouseout = () => this.autoPlay();
}
this.nextClick();
this.prevClick();
},
setInitialSlide() {
if (defaultOption.initialSlide != 0) {
this.changePagination(defaultOption.initialSlide)
}
},
setGrabCursor() {
defaultOption.grabCursor ? this.wrapper.style.cursor = "pointer" : ""
},
setSpeed() {
this.wrapper.style.transition = `all ease ${defaultOption.speed / 1000}s`;
},
nextClick() {
// this 指向
// var test = this;
// 1：保存this
// 2: =>
// 3: a().bind(this)
this.next != null ? this.next.onclick = () => {
this.setSpeed();
this.animation(-defaultOption.width())
} : ''
},
prevClick() {
this.prev != null ? this.prev.onclick = () => {
this.setSpeed();
this.animation(defaultOption.width())
} : ''
},
slideTo(index) {
this.setSpeed();
this.changePagination(index)
},
on (eventType,event) {
defaultOption.eventList[eventType] = event;
},
CreatedPagination() {
if (this.pagination != null) {
Array.from(this.wrapper.children).forEach((v,i) => {
this.pagination.innerHTML += ` <li class="${i == 0 ? 'active' : ''}"></li>`
});
this.BindPaginationClick();
}
},
BindPaginationClick() {
Array.from(this.pagination.children).forEach((v,i) => {
v.onclick = () => {
this.setSpeed();
this.changePagination(i)
}
})
},
changePagination(i) {
defaultOption.eventList.slideChange && defaultOption.eventList.slideChange(i);
defaultOption.on.slideChange && defaultOption.on.slideChange(i);
Array.from(this.pagination.children).forEach((item) => {
item.className = ""
});
Array.from(this.pagination.children)[i].className = "active";
this.wrapper.style.transform = `translateX(${i * -defaultOption.width()}px)`;
},
animation(offset) {
var val = parseInt(this.wrapper.style.transform.match(/translateX\(([\s\S]*?)\)/)[1]);
var newOffset = offset + val;
var maxWidth = -(this.wrapper.children.length - 1) * defaultOption.width();
if (newOffset > 0) {
if (defaultOption.loop) {
newOffset = maxWidth;
} else {
newOffset = 0
}
}
if (newOffset < maxWidth) {
if (defaultOption.loop) {
newOffset = 0;
} else {
newOffset = maxWidth
}
}
var index = Math.abs(newOffset / defaultOption.width());
this.changePagination(index);
defaultOption.eventList.slideChange && defaultOption.eventList.slideChange(index);
defaultOption.on.slideChange && defaultOption.on.slideChange(index)
},
autoPlay () {
defaultOption.timer = setInterval(() => {
this.animation(-defaultOption.width())
}, defaultOption.time);
}
}
function $(className) {
var newClassName = className.split(" ");
if (newClassName.length > 1) {
var father = newClassName[newClassName.length - 2];
var childrenList = document.querySelector(father).children;
var arr = Array.from(childrenList).filter(function (el){
if (
el.className.indexOf( (newClassName[newClassName.length-1]).replace(".", "") ) > -1
||
el.tagName.toLowerCase() == newClassName[newClassName.length-1]
) {
return el;
}
});
if (arr.length > 1) {
return document.querySelectorAll(className)
} else if (arr.length == 1){
return document.querySelector(className)
} else {
throw new Error(`${className} 不存在，请检查`)
}
} else {
return document.querySelector(newClassName);
}
}
window.lb = swiper;
})()

27
历届学生/逯帅帅/项目开发/上课项目/swiper/需求分析 Normal file
View File

@@ -0,0 +1,27 @@
【完成】1：initialSlide 默认展示第几张图
2：direction 设置滚动方向：vertical 垂直 ，horizontal 水平
【完成】3：speed 设置轮播滚动时候的速度
【完成】4：grabCursor : true 设置鼠标形状为手
【完成】5：slideChange 监听轮播图滚动到第几张了
var mySwiper = new Swiper('.swiper-container', {
on: {
slideChange: function () {
console.log(this.activeIndex);
},
},
};
var mySwiper = new Swiper('.swiper-container');
mySwiper.on('slideChange', function () {
});
6：loop 是否可以循环滚动 true 可以， false 不可以
【完成】7：autoplay 是否自动播放
【完成】8：time 每隔几秒播放一次
【完成】9：slideTo 方法，控制轮播图切换到对应的下标
mySwiper.slideTo(0, 1000, false);//切换到第一个slide，速度为1秒