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

213
历届学生/18课程/class18/课程/2020-10-23/index.html Normal file
View File

@@ -0,0 +1,213 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
html,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 520px;
height: 280px;
border: 1px solid #000;
margin: 20px auto;
overflow: hidden;
position: relative;
}
.lb {
width: 2080px;
position: absolute;
transition: all ease 0.3s;
}
.lb li {
float: left;
}
.navigation {
position: absolute;
width: 100%;
top: 50%;
margin-top: -10.5px;
}
.previous {
float: left;
}
.next {
float: right;
}
.navigation div {
color: #fff;
width: 30px;
height: 30px;
background: #000;
text-align: center;
font-size: 21px;
line-height: 27px;
}
.dot {
position: absolute;
z-index: 9;
bottom: 20px;
left: 50%;
margin-left: -40px;
}
.dot li {
float: left;
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
margin-right: 5px;
}
.active {
background: red !important;
}
</style>
</head>
<body>
<div class="main">
<ul class="lb" style="left: 0px;">
<li>
<img src="./lb_1.jpg" alt="">
</li>
<li>
<img src="./lb_2.jpg" alt="">
</li>
<li>
<img src="./lb_3.jpg" alt="">
</li>
<li>
<img src="./lb_4.png" alt="">
</li>
</ul>
<div class="navigation">
<div class="previous"><</div>
<div class="next">></div>
</div>
<ul class="dot">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
var Next = document.querySelector(".next"),
Previous = document.querySelector(".previous"),
Dot = document.querySelectorAll(".dot li"),
Main = document.querySelector(".main"),
AutoPlay,
LbMain = document.querySelector(".lb");
// 下一页按钮被点击
Next.onclick = function() {
// 移动轮播图
animation(-520)
// 切换小圆点的激活样式
ChangeDotActive()
}
// 上一页按钮被点击
Previous.onclick = function() {
// 移动轮播图
animation(520)
// 切换小圆点的激活样式
ChangeDotActive()
}
//
function animation(offset) {
// 计算移动距离
var y = parseInt(LbMain.style.left) + offset;
// 如果是最后一张图的话，再切换回第一张
if (y < -1560) {
LbMain.style.left = "0px";
return;
} else {
LbMain.style.left = `${y}px`
}
// 如果时第一张的话，再切换，回最后一张
if (y > 0) {
LbMain.style.left = "-1560px"
} else {
LbMain.style.left = `${y}px`
}
}
// 切换小圆点的激活样式
function ChangeDotActive(type = null) {
// 小标
var index = "";
// == null 是 上下翻页按钮被点击时候执行的，需要小圆点跟着轮播图一起联动
if (type == null) {
var TotalLeft = Math.abs(parseInt(document.querySelector(".lb").style.left));
index = TotalLeft / 520;
// 小圆点单独被点击的时候
} else {
index = type;
}
// 清除所有的激活样式
Dot.forEach(val => val.className = "");
// 为你点击的li加激活样式
Dot[index].className = "active";
}
// 循环绑定事件，点击切换样式，并滚动轮播图
Dot.forEach((val, index) => {
val.onclick = function() {
ChangeDotActive(index)
LbMain.style.left = `-${index * 520}px`;
}
})
// 鼠标悬浮停止自动播放
Main.onmouseover = function() {
clearInterval(AutoPlay)
}
// 鼠标离开，重新开始自动播放
Main.onmouseout = function() {
Play()
}
// 自动播放
function Play() {
AutoPlay = setInterval(() => {
Next.onclick()
// animation(-520)
// ChangeDotActive()
}, 2000)
}
Play()
</script>
</html>

BIN
历届学生/18课程/class18/课程/2020-10-23/lb_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
历届学生/18课程/class18/课程/2020-10-23/lb_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
历届学生/18课程/class18/课程/2020-10-23/lb_3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
历届学生/18课程/class18/课程/2020-10-23/lb_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

42
历届学生/18课程/class18/课程/2020-10-23/swiper.css Normal file
View File

@@ -0,0 +1,42 @@
.swiper-wrapper .swiper-slide {
float: left;
}
.swiper-container {
overflow: hidden;
position: relative;
}
.swiper-pagination {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.swiper-dot {
width: 7px;
height: 7px;
background: #fff;
border-radius: 100%;
margin-right: 5px;
float: left;
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 30px;
cursor: pointer;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
.swiper-wrapper {
position: relative;
}
.swiper-active {
background: red !important;
}

77
历届学生/18课程/class18/课程/2020-10-23/swiper.html Normal file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>swiper</title>
<script src="./swiper.js"></script>
<link rel="stylesheet" href="./swiper.css">
<style>
body {
margin: 0;
padding: 0;
}
.swiper-slide img {
width: 100%;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<button>去第二张轮播图</button>
</body>
<script>
// ajax请求后端获得的轮播图的数据
var SwiperList = [
{ id: 1, title: '轮播1', img: 'https://st-cn.meishij.net/p2/20201022/20201022113526_224.jpg' },
{ id: 2, title: '轮播2', img: 'https://st-cn.meishij.net/p2/20201023/20201023101908_914.jpg' },
{ id: 3, title: '轮播3', img: 'https://st-cn.meishij.net/p2/20201019/20201019165100_268.jpg' },
];
// 将后端给的数据渲染到页面上
function RenderSlide() {
SwiperList.forEach((v)=>{
document.querySelector(".swiper-wrapper").innerHTML +=
`
<div class="swiper-slide">
<img src="${v.img}" alt="${v.title}">
</div>
`
})
}
RenderSlide()
var ddd = new swiper('.swiper-container', {
time: 3,
auto: false
})
// 调用 slideTo 方法，让轮播图切换到指定位置，参数是下标
document.querySelector("button").onclick = function(){
ddd.slideTo(2)
}
</script>
</html>

262
历届学生/18课程/class18/课程/2020-10-23/swiper.js Normal file
View File

@@ -0,0 +1,262 @@
(function () {
// 默认参数
// slideChangeTransitionStart【完成】
// slideTo【完成】
var defaultConf = {
reverse: false,
timer: '', // 保存自动播放的定时器
ParentElement: '.swiper-container',
config: {
loop: false, // 是否开启循环播放【完成】
time: 1, // 自动播放的间隔事件【完成】
speed: 500, // 切换轮播图时候用的时间【完成】
grabCursor: false, // 鼠标放到轮播图上是否显示为 小手【完成】
initialSlide: 0, // 默认显示第一个【完成】
auto: false, // 是否开启自动播放【完成】
},
// 小圆点的父标签选择器名称
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next', // 下一页
prevEl: '.swiper-button-prev', // 上一页
},
}
/**
* 构造函数
* @param {*} ParentElement 父节点的选择器名称
* @param {*} Configuration 插件的自定义设置项
*/
function Swiper(ParentElement, Configuration) {
defaultConf.ParentElement = ParentElement || defaultConf.ParentElement;
defaultConf.config.loop = Configuration.loop || defaultConf.config.loop;
defaultConf.config.time = Configuration.time || defaultConf.config.time;
defaultConf.config.speed = Configuration.speed || defaultConf.config.speed;
defaultConf.config.grabCursor = Configuration.grabCursor || defaultConf.config.grabCursor;
defaultConf.config.initialSlide = Configuration.initialSlide || defaultConf.config.initialSlide;
defaultConf.config.auto = Configuration.auto || defaultConf.config.auto;
console.log(Configuration);
this.slideArr = this._(".swiper-wrapper .swiper-slide");
// 最外层 swiper-container 宽度
this.f = this.$(defaultConf.ParentElement).offsetWidth;
// 判断小圆点
if (Configuration.hasOwnProperty("pagination")) {
defaultConf.pagination.el = Configuration.pagination.el;
this.RenderDot()
}
// 判断使用自定义前进后退按钮
if (Configuration.hasOwnProperty("navigation")) {
this.RenderNavigation()
//判断下一页按钮的名称是否自定义
if (Configuration.navigation.hasOwnProperty("nextEl")) {
defaultConf.navigation.nextEl = Configuration.navigation.nextEl;
}
//判断上一页按钮的名称是否自定义
if (Configuration.navigation.hasOwnProperty("prevEl")) {
defaultConf.navigation.prevEl = Configuration.navigation.prevEl;
}
}
this.UserConfig = Configuration
this.init()
}
// 类的方法
Swiper.prototype = {
init: function () {
this.SetWrapperWidth();
defaultConf.config.auto ? this.AutoPlay() : '';
this.initSwiperSlide()
},
// 设置swiper-slide父类的宽度
SetWrapperWidth: function () {
// 计算swiper-slide的宽度
this.slideArr.forEach(v => v.style.width = `${this.f}px`)
this.$(".swiper-wrapper").style = `
width: ${this.f * this.slideArr.length}px;
left: -${this.f * defaultConf.config.initialSlide}px;
transition: all ease ${defaultConf.config.speed / 1000}s;
cursor: ${defaultConf.config.grabCursor ? 'pointer' : ''} ;
`
},
/**
* 注册移动端滑动
*/
initSwiperSlide: function() {
var fa = this.$(defaultConf.ParentElement),
startX = 0;
fa.addEventListener('touchstart', function(e) {
startX = e.targetTouches[0].pageX
console.log("开始下标：", startX);
})
// fa.addEventListener("touchmove",(e) => {
// var x = e.changedTouches[0].pageX;
// console.log(e.changedTouches[0].pageX);
// this.$(".swiper-wrapper").style.left = `${-(x)}px`
// })
fa.addEventListener('touchend', (e) => {
console.log();
var endX = e.changedTouches[0].pageX
console.log("结束下标：", endX);
// 左滑
if (endX < startX) {
console.log("左滑");
this.animation(-this.f)
} else {
console.log("右滑");
this.animation(this.f)
}
})
},
// 生成小圆点
RenderDot: function () {
this.slideArr.forEach((v, i) => {
this.$(defaultConf.pagination.el).innerHTML +=
`
<div class="swiper-dot ${i == 0 ? 'swiper-active' : ''}"></div>
`
});
var Dot = this._(`${defaultConf.pagination.el} .swiper-dot`);
Dot.forEach((v, i) => {
v.onclick = () => {
this.UserConfig.pagination && this.ChangeDotActive(i)
this.$(".swiper-wrapper").style.left = `-${i * this.f}px`;
}
})
},
// 渲染左右前进后退按钮
RenderNavigation: function () {
var prev = this.$(defaultConf.navigation.prevEl);
var next = this.$(defaultConf.navigation.nextEl);
prev.innerText = "<";
next.innerText = ">";
this.BindNavigationClick(prev, next)
},
// 为上一页下一页按钮绑定切换事件
BindNavigationClick() {
// var a = this
// 下一页
this.$(defaultConf.navigation.nextEl).onclick = () => {
this.animation(-this.f)
this.UserConfig.pagination && this.ChangeDotActive()
}
// 上一页
this.$(defaultConf.navigation.prevEl).onclick = () => {
this.animation(this.f)
this.UserConfig.pagination && this.ChangeDotActive()
}
},
// 切换动画
animation(offset) {
var swiperWrapper = this.$(".swiper-wrapper");
var y = parseInt(swiperWrapper.style.left) + offset,
max = -(this.f * (this.slideArr.length - 1));
// 如果时最后一张图
if (y < max) {
console.log("如果时最后一张图");
if (defaultConf.config.loop) {
swiperWrapper.style.left = "0px";
} else if (defaultConf.config.auto) {
defaultConf.reverse = true
this.animation(this.f)
}
return;
// 判断是不是第一张图
} else if (y > 0) {
if (defaultConf.config.loop == false && defaultConf.config.auto) {
defaultConf.reverse = false
swiperWrapper.style.left = `${y - this.f*2}px`
}
if (defaultConf.config.loop) {
swiperWrapper.style.left = `${max}px`
}
return
} else {
if (defaultConf.config.loop == false
&& defaultConf.config.auto
&& defaultConf.reverse) {
swiperWrapper.style.left = `${y}px`
} else {
swiperWrapper.style.left = `${y}px`
}
}
},
ChangeDotActive(type = null) {
var Dot = this._(`${defaultConf.pagination.el} .swiper-dot`);
var index = "";
if (type == null) {
var TotalLeft = Math.abs(parseInt(this.$(".swiper-wrapper").style.left));
index = TotalLeft / this.f;
} else {
index = type;
}
// 实现调用用户传入的方法，返回下标给用户
this.UserConfig.on && this.UserConfig.on.slideChangeTransitionStart(index)
// 清除所有的激活样式
Dot.forEach(val => val.className = "swiper-dot");
// 为你点击的li加激活样式
Dot[index].className = "swiper-dot swiper-active";
},
AutoPlay() {
defaultConf.timer = setInterval(() => {
if (defaultConf.config.loop == false
&& defaultConf.config.auto
&& defaultConf.reverse) {
this.animation(this.f)
} else {
this.animation(-this.f)
}
this.UserConfig.pagination && this.ChangeDotActive()
}, defaultConf.config.time * 1000)
this.$(defaultConf.ParentElement).onmouseover = function () {
clearInterval(defaultConf.timer)
}
this.$(defaultConf.ParentElement).onmouseout = () => {
this.AutoPlay()
}
},
// 通过js调用此方法，实现轮播图的切换
slideTo(index) {
this.$(".swiper-wrapper").style.left = `-${index * this.f}px`;
this.UserConfig.pagination && this.ChangeDotActive()
},
$: function (className) {
return document.querySelector(className)
},
_: function (className) {
return document.querySelectorAll(className)
}
}
window.swiper = Swiper
})()