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

183
历届学生/front-end-team-10/项目练习/上课项目/js 案例/轮播/index.html Normal file
View File

@@ -0,0 +1,183 @@
<!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>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.swiper {
width: 630px;
height: 315px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.swiper .swiper_wrap {
display: flex;
position: relative;
transition: all 1s;
}
.swiper .swiper_wrap li {}
.swiper .swiper_wrap li img {
width: 630px;
height: 315px;
}
.swiper .button {
width: 100%;
position: absolute;
top: 50%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.swiper .button div {
color: #fff;
font-size: 20px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
cursor: pointer;
}
.swiper .button .left {}
.swiper .button .right {}
.swiper .dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
display: flex;
}
.swiper .dot li {
width: 13px;
height: 13px;
background: #fff;
border-radius: 100%;
margin-right: 10px;
cursor: pointer;
}
.swiper .dot li:last-child {
margin-right: 0px;
}
.swiper .dot .active {
background: red;
}
</style>
</head>
<body>
<div class="swiper">
<ul class="swiper_wrap" style="left: 0px;">
<li>
<img src="https://img.alicdn.com/imgextra/i4/6000000003174/O1CN01cpv0cZ1ZJjvVWrUuo_!!6000000003174-2-octopus.png"
alt="">
</li>
<li>
<img src="https://img.alicdn.com/imgextra/i2/6000000003386/O1CN01ySmLuo1asptKSfbHC_!!6000000003386-0-octopus.jpg"
alt="">
</li>
<li>
<img src="https://img.alicdn.com/imgextra/i3/6000000000084/O1CN012wKWpe1CUW5EEs61K_!!6000000000084-0-octopus.jpg"
alt="">
</li>
</ul>
<div class="button">
<div class="left">< </div>
<div class="right"> > </div>
</div>
<ul class="dot">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
// TODO 使用 下标完成对 sport 的改造，
// 实现 调用 changeDotActive 只需要传入 下标即可
var timeId = null;
$(".right").onclick = () => {
sport(-630)
}
$(".left").onclick = () => {
sport(630)
}
_(".dot li").forEach((v, i) => {
v.onclick = () => {
changeDotActive(i)
}
})
$(".swiper").onmouseover = () => {
clearInterval(timeId)
}
$(".swiper").onmouseout = () => {
auto()
}
function sport(offset) {
var oldLeft = parseInt($(".swiper_wrap").style.left);
console.log("a",$(".swiper_wrap").style.left);
var newLeft = oldLeft + offset;
if (newLeft <= 0 && newLeft >= -1260) {
changeDotActive(newLeft / -630)
// changeDotActive(i)
}
}
function changeDotActive(i) {
_(".dot li").forEach(val => {
val.classList.remove("active");
})
_(".dot li")[i].classList.add("active")
$(".swiper_wrap").style.left = `${i * -630}px`
}
function auto() {
timeId = setInterval(() => {
$(".right").onclick()
}, 2000)
}
auto()
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

144
历届学生/front-end-team-10/项目练习/上课项目/js 案例/轮播/index2.html Normal file
View File

@@ -0,0 +1,144 @@
<!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>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.swiper {
width: 630px;
height: 315px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.swiper .swiper_wrap {
display: flex;
position: relative;
transition: all 1s;
}
.swiper .swiper_wrap li {}
.swiper .swiper_wrap li img {
width: 630px;
height: 315px;
}
.swiper .button {
width: 100%;
position: absolute;
top: 50%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.swiper .button div {
color: #fff;
font-size: 20px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
cursor: pointer;
}
.swiper .button .left {}
.swiper .button .right {}
.swiper .dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
display: flex;
}
.swiper .dot li {
width: 13px;
height: 13px;
background: #fff;
border-radius: 100%;
margin-right: 10px;
cursor: pointer;
}
.swiper .dot li:last-child {
margin-right: 0px;
}
.swiper .dot .active {
background: red;
}
</style>
</head>
<body>
<div class="swiper banner">
<ul class="swiper_wrap" style="left: 0px;">
<li>
<img src="https://img.alicdn.com/imgextra/i4/6000000003174/O1CN01cpv0cZ1ZJjvVWrUuo_!!6000000003174-2-octopus.png"
alt="">
</li>
<li>
<img src="https://img.alicdn.com/imgextra/i2/6000000003386/O1CN01ySmLuo1asptKSfbHC_!!6000000003386-0-octopus.jpg"
alt="">
</li>
<li>
<img src="https://img.alicdn.com/imgextra/i3/6000000000084/O1CN012wKWpe1CUW5EEs61K_!!6000000000084-0-octopus.jpg"
alt="">
</li>
</ul>
<div class="button">
<div class="left">&#8249;</div>
<div class="right">&#8250;</div>
</div>
<ul class="dot"></ul>
</div>
<button>去下标2的图片(3)</button>
</body>
<script src="./index2.js"></script>
<script>
/**
* 第一个参数 是 最外层 父元素类名
* 第二个是允许用户自定义插件的参数
*/
var a = new Swiper(".banner", {
autoPlay: false,
time: 2000,
initialSlide: 0,
// on: {
// slideChange: function (index) {
// console.log("当前轮播图切换到：",index);
// },
// slideChange3: function (index) {
// console.log("当前轮播图切换到：",index);
// }
// },
})
document.querySelector("button").onclick = () => {
a.slideTo(2)
}
</script>
</html>

208
历届学生/front-end-team-10/项目练习/上课项目/js 案例/轮播/index2.js Normal file
View File

@@ -0,0 +1,208 @@
// // 自执行函数
// // 好处？
//
class Swiper {
defaultOption = {
TimeId: null,
autoPlay: false,
time: 1000,
initialSlide: 0, // 实现了
el: '.swiper',
on: { },
length: () => this._f(`.swiper_wrap li`).length,
width: () => this.$f(``).offsetWidth,
initSlideLeft: () => {
this.$f(".swiper_wrap").style.left = `${
this.defaultOption.initialSlide * -this.defaultOption.width()
}px`
}
}
// 构造函数里面接受
constructor (el, option) {
if (el.length == 0 || this.$(el) == null) {
console.error(`类名:${el}不存在，请检查`);
} else {
this.defaultOption.el = el || this.defaultOption.el;
this.defaultOption.autoPlay = option.autoPlay || this.defaultOption.autoPlay;
this.defaultOption.time = option.time || this.defaultOption.time;
this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide;
if (option.hasOwnProperty("on")) {
this.defaultOption.on = option.on
}
this.init()
}
}
init() {
this.defaultOption.initSlideLeft()
if (this.$f(".button") != null) {
this.next()
this.prev()
}
this.defaultOption.autoPlay
? this.autoPlay()
: ''
this.$f(".dot") == null ? '' : this.renderDot()
}
next() {
this.click(".right", (v) => this.sport(1))
}
prev() {
this.click(".left", v => this.sport(-1))
}
changeDotActive(i) {
this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i)
if (this.$f(".dot") != null) {
this._f(".dot li").forEach(val => val.classList.remove("active"))
this._f(".dot li")[i].classList.add("active")
}
this.$f(".swiper_wrap").style.left = `${i * -this.defaultOption.width()}px`
}
renderDot() {
for (var i = 0; i < this.defaultOption.length(); i++) {
this.$f(".dot").innerHTML += `
<li class="${i == this.defaultOption.initialSlide ? 'active' : '' }"></li>
`
}
this.click(".dot li", (v,i) => this.changeDotActive(i))
}
autoPlay() {
this.defaultOption.TimeId = setInterval(() => this.sport(1), this.defaultOption.time)
this.$f("").onmouseover = () => clearInterval(this.defaultOption.TimeId)
this.$f("").onmouseout = () => this.autoPlay()
}
sport(offset) {
this.defaultOption.initialSlide += offset
if (this.defaultOption.initialSlide < 0) {
this.defaultOption.initialSlide = 0
}
if (this.defaultOption.initialSlide > this.defaultOption.length() - 1) {
this.defaultOption.initialSlide = this.defaultOption.length() - 1
}
if (this.defaultOption.initialSlide >= 0 && this.defaultOption.initialSlide <= this.defaultOption.length() - 1) {
this.changeDotActive(this.defaultOption.initialSlide)
}
}
slideTo(index) {
this.changeDotActive(index)
}
click(className, callback) {
this._f(className).forEach((v,i) => v.onclick = () => callback(v,i))
}
$f(className) {
return this.$(`${this.defaultOption.el} ${className}`)
}
_f(className) {
return this._(`${this.defaultOption.el} ${className}`)
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
// 为什么要 new
// x 类的 实例
// var x = new Swiper(1000);
// x.test()
// 哪些功能需要自定义？
// 是否需要自动播放
// 设置自动播放的时间间隔
// 可以设置默认显示第几张
// 如果不写html，就不需要对应的功能
// 可以js编程控制轮播图滚动到第几张
// 当轮播图滚动的时候要抛出当前下标
// this 指向
// 函数执行的时候才能确定this到底指向谁,
// 实际上this的最终指向的是那个调用它的对象
// var time = 4000
// var a = {
// time: 2000,
// b: () => {
// this.time = 5000;
// var test = () => {
// console.log(this.time);
// }
// return test
// }
// }
// var dddd = a.b()
// dddd()
// 箭头函数 和 普通函数的区别
// 如何改变this 指向？？
// https://www.runoob.com/w3cnote/js-call-apply-bind.html
// 继承
// class car {
// color = "red";
// speed = null;
// start() {}
// stop() {}
// }
// class mtc extends car {
// constructor(dddd) {
// super()
// this.par = dddd
// console.log(this.par);
// }
// size() {
// console.log("摩托车很小：",this.color);
// }
// }
// class jhc extends car {
// rescue() {
// console.log("救人");
// }
// }
// var mt = new mtc("1")
// // mt.size()

10
历届学生/front-end-team-10/项目练习/上课项目/js 案例/轮播/笔记.txt Normal file
View File

@@ -0,0 +1,10 @@
正则表达式
手机号验证
12345678901
11056042604
邮箱验证
密码验证