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

33
历届学生/韩一伟/项目开发/上课项目/js案例/ddd.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
var a = [
{ id: 1, name: '1111' },
{ id: 2, name: '2222' },
{ id: 3, name: '3333' },
{ id: 4, name: '4444' },
]
// a.forEach(function (v) {
// if (v.id == 3) {
// c.push(v)
// }
// })
var c = a.filter(function (v) {
return v.id == 3
})
console.log(c)
console.log(a)
</script>
</html>

BIN
历届学生/韩一伟/项目开发/上课项目/js案例/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

147
历届学生/韩一伟/项目开发/上课项目/js案例/hongbao.html Normal file
View File

@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
height: 100vh;
position: relative;
overflow: hidden;
}
.hb {
width: 50px;
height: 70px;
top: -70px;
position: absolute;
user-select: none;
}
.popup {
position: fixed;
z-index: 9999;
width: 100vw;
height: 100vh;
background: rgb(0 0 0 / 58%);
display: none;
}
.popup_center {
width: 400px;
height: 250px;
background: #fff;
border-radius: 10px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.closed {
position: absolute;
right: 15px;
top: 10px;
color: #000;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="popup">
<div class="popup_center">
<div class="closed">x</div>
</div>
</div>
</body>
<script>
var height = document.body.clientHeight,
width = document.body.clientWidth,
intervalId = [], startHb = null, currentClickHb = null;
/**
* 创建红包的
* @constructor
*/
function CreatedHongBao() {
var x = parseInt(Math.random() * (width - 50));
var hb = document.createElement("img")
hb.src = "./hb.png"
hb.className = "hb"
hb.style.left = `${x}px`
hb.style.top = `-50px`
hb.onclick = function () {
currentClickHb = hb
intervalId.forEach(function (v) {
clearInterval(v.id)
})
clearInterval(startHb)
$(".popup").style.display = "block"
}
$("body").appendChild(hb)
motion(hb,x)
}
function motion(el,x) {
intervalId.push({
id: setInterval(function () {
var top = parseInt(el.style.top) + 10;
if (top > height) {
remove(el,x)
} else {
el.style.top = `${top}px`
}
},100),
cardId: x
})
}
function remove(el,x) {
try {
intervalId = intervalId.filter(function (v) {
if (v.cardId == x) {
$("body").removeChild(el)
clearInterval(v.id)
} else {
return v
}
});
} catch (e) {
}
}
function auto () {
startHb = setInterval(function () {
CreatedHongBao()
}, 1000)
}
auto()
$(".closed").onclick = function () {
var imgAll = document.querySelectorAll("img")
$(".popup").style.display = "none"
remove(currentClickHb, parseInt(currentClickHb.style.left))
imgAll.forEach(function (v) {
motion(v,parseInt(v.style.left))
})
auto()
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

77
历届学生/韩一伟/项目开发/上课项目/js案例/index.html Normal file
View File

@@ -0,0 +1,77 @@
<!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>
<style>
body {
margin: 0;
height: 100vh;
position: relative;
}
span {
position: absolute;
transition: all 1.5s;
}
</style>
</head>
<body>
</body>
<script>
// 1: 在网页任意一个地方点击可以生成一个标签（颜色是随机的颜色）
//
// 向标签内一次插入 12字 方针
// 放标签放到网页上（鼠标点击的地方）
// 2: 让文字向上运动起来
// 3: 让文字消失
var index = 0
$("body").onclick = function (e) {
var x = e.x,
y = e.y - 21;
var text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"]
var span = document.createElement("span")
span.innerText = text[index];
span.style = `
left: ${x}px;
top: ${y}px;
opacity: 1;
color: hsla(${parseInt(Math.random() * 360)},100%,50%,1)
`
$("body").appendChild(span)
motion(span, x,y)
index+=1
if (index > 11) {
index = 0
}
}
function motion(el,x,y) {
setTimeout(function () {
el.style.top = `${y - 100}px`
el.style.opacity = 0
}, 100)
setTimeout(function () {
$("body").removeChild(el)
}, 1600)
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

BIN
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

75
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/preview.css Normal file
View File

@@ -0,0 +1,75 @@
.preview {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
.preview .preview_black{
width: 100%;
height: 100%;
background: #0000008c;
position: absolute;
}
.preview .preview_main{
position: relative;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.preview_main .show {
height: 100%;
}
.preview_main .closed {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: #fff;
z-index: 99;
}
.preview_main .preview_page i {
font-size: 30px;
font-weight: bolder;
}
.preview_main .preview_page {
color: #fff;
z-index: 99;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 20px;
box-sizing: border-box;
}
.preview_action {
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #606266;
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
border-color: #fff;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: space-around;
color: #fff;
}
.preview_action i {
font-size: 18px;
}
.leftx {
transform: rotateY(180deg);
}

53
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/preview.html Normal file
View File

@@ -0,0 +1,53 @@
<!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">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_g3xukxxa1z.css">
<link rel="stylesheet" href="./preview.css">
<title>Document</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<div class="main"></div>
</body>
<script src="./preview.js"></script>
<script>
// 两个参数
// 现实第几张图
// 图片数组
var imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']
imgArr.forEach(function (v) {
document.querySelector(".main").innerHTML
+= `<img width="100" src="${v}"/>`
})
document.querySelectorAll(".main img").forEach(function (v,i) {
v.onclick = function () {
console.log(v);
new preview({
index: i,
data: imgArr
})
}
})
</script>
</html>

195
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/preview.js Normal file
View File

@@ -0,0 +1,195 @@
(function () {
body = $("body")
class Preview {
x1;
y1;
l;
t;
isRun = false;
constructor(option) {
if (! option.hasOwnProperty("index")) {
throw new Error("抱歉，index参数必传")
}
if ( option.hasOwnProperty("data") == false || Array.isArray(option.data) == false) {
throw new Error("抱歉，data参数必传，且必须为数组")
}
this.defaultOption = option
console.log(this.defaultOption);
this.createdHtml()
this.bindEvent()
this.MouseEvent()
}
createdHtml() {
body.insertAdjacentHTML("beforeend",`
<div class="preview">
<div class="preview_black"></div>
<div class="preview_main">
<img style="transform: scale(1) rotate(0deg);margin-left:0" class="show" src="${this.defaultOption.data[this.defaultOption.index]}" alt="">
<i class="iconfont icon-closedx closed"></i>
<div class="preview_page">
<i class="iconfont icon-zuo prev"></i>
<i class="iconfont icon-zhankai-copy next"></i>
</div>
<div class="preview_action">
<i class="iconfont icon-suoxiao"></i>
<i class="iconfont icon-fangda"></i>
<i class="iconfont icon-fullscreen isfullscreen"></i>
<i class="iconfont icon-shuaxin leftx"></i>
<i class="iconfont icon-shuaxin rightx"></i>
</div>
</div>
</div>
`)
}
bindEvent() {
// 关闭按钮被点击
$(".closed").onclick = () => {
body.removeChild($(".preview"))
}
// 解决 this 指向
// 外部提前保存this
// 箭头函数 => es6
// 下一页点击事件
$(".next").onclick = () => {
this.defaultOption.index += 1
if (this.defaultOption.index > this.defaultOption.data.length - 1) {
this.defaultOption.index = 0
}
this.changeImgSrc()
}
// 上一页点击事件
$(".prev").onclick = () => {
this.defaultOption.index -= 1
if (this.defaultOption.index < 0) {
this.defaultOption.index = this.defaultOption.data.length - 1
}
this.changeImgSrc()
}
// 放大
$(".icon-fangda").onclick = () => {
$(".show").style.transform = `scale(${this.scale() + 0.2}) rotate(${this.rotate()}deg)`
}
// 缩小
$(".icon-suoxiao").onclick = () => {
$(".show").style.transform = `scale(${this.scale() - 0.2 <= 0.2 ? 0.2 : this.scale() - 0.2}) rotate(${this.rotate()}deg)`
}
// 左旋转
$(".leftx").onclick = () => {
$(".show").style.transform = `scale(${this.scale()}) rotate(${this.rotate()-90}deg)`
}
// 右旋转
$(".rightx").onclick = () => {
$(".show").style.transform = `scale(${this.scale()}) rotate(${this.rotate()+90}deg)`
}
$(".isfullscreen").onclick = () => {
if ($(".isfullscreen").classList.contains("icon-fullscreen")) {
$(".show").style.transform = `scale(2) rotate(${this.rotate()}deg)`
$(".isfullscreen").classList.remove("icon-fullscreen")
$(".isfullscreen").classList.add("icon-suoxiao1")
} else {
$(".show").style.transform = `scale(1) rotate(${this.rotate()}deg)`
$(".isfullscreen").classList.add("icon-fullscreen")
$(".isfullscreen").classList.remove("icon-suoxiao1")
}
}
}
MouseEvent() {
$(".show").onmousedown = (e) => {
this.isRun = true;
console.log("你按下了 this.isRun ：", this.isRun)
e.preventDefault()
this.x1 = e.clientX;
this.y1 = e.clientY;
this.l = parseInt($(".show").style.marginLeft);
console.log(this.l)
this.t = $(".show").offsetTop;
this.ImgMove(".show")
}
// 离开图片的时候，把事件交给 preview
$(".show").onmouseout = (e) => {
console.log("离开图片的时候，把事件交给 preview: ", this.isRun)
if (this.isRun) {
this.ImgMove(".preview")
}
}
// 鼠标在背景上松开的时候
$(".preview").onmouseup = (e) => {
this.isRun = false
$(".show").onmousemove = null
$(".preview").onmousemove = null
}
// 鼠标在图片上松开的时候
$(".show").onmouseup = (e) => {
e.stopPropagation()
this.isRun = false
$(".show").onmousemove = null
}
}
ImgMove(className) {
$(className).onmousemove = (e) => {
e.preventDefault()
var x2 = e.x,
y2 = e.y;
var x3 = x2 - this.x1,
y3 = y2 - this.y1;
//更改元素的left，top值
$(".show").style.marginLeft = `${x3 + this.l}px`;
$(".show").style.marginTop = `${y3 + this.t}px`;
}
}
changeImgSrc() {
console.log(this.defaultOption.index)
$(".show").src = this.defaultOption.data[this.defaultOption.index]
}
scale() {
return Number($(".show").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
}
rotate() {
return Number($(".show").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
}
}
function $(className) {
return document.querySelector(className)
}
window.preview = Preview
})()

24
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/事件冒泡.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="test" onclick="test()">
<button onclick="hahahah(event)">点我</button>
</div>
</body>
<script>
function test() {
console.log("test")
}
function hahahah(e) {
e.stopPropagation()
console.log("hhahaha")
}
</script>
</html>

6
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/笔记.txt Normal file
View File

@@ -0,0 +1,6 @@
使用js封装插件
// 自执行函数
// this 指向
// this 是个墙头草

0
历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/index.css Normal file
View File

102
历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/index.html Normal file
View File

@@ -0,0 +1,102 @@
<!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>
body,ul,li,p{
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 100%;
position: relative;
overflow: hidden;
}
.dot {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dot li {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
margin-right: 10px;
}
.dot .active {
background: red;
}
.swiper {
position: relative;
display: flex;
}
.swiper_item {
flex-shrink: 0;
width: 100%;
}
.swiper img {
width: 100%;
}
.action {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.but {
color: #fff;
font-size: 40px;
}
</style>
</head>
<body>
<div class="main">
<div class="swiper" style="left: 0px">
<div class="swiper_item">
<img src="https://img.alicdn.com/imgextra/i1/6000000008079/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" alt="">
</div>
<div class="swiper_item">
<img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
</div>
<div class="swiper_item">
<img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
</div>
</div>
<div class="action">
<div class="but prev"> &lt; </div>
<div class="but next"> &gt; </div>
</div>
<ul class="dot">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script src="index.js"></script>
</html>

74
历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/index.js Normal file
View File

@@ -0,0 +1,74 @@
var time = null;
$(".next").onclick = () => {
motion(-520)
}
$(".prev").onclick = () => {
motion(520)
}
// 小圆点点击事件
_(".dot li").forEach((v,i) => {
v.onclick = function () {
changeDot(i)
}
});
function changeDot(index) {
var liArr = _(".dot li")
liArr.forEach((itme) => {
itme.classList.remove("active")
})
liArr[index].classList.add("active")
set_left(index * -520)
}
function motion(offset) {
var totalOffset = left() + offset;
if (totalOffset < -1040) {
totalOffset = 0
}
if (totalOffset > 0) {
totalOffset = -1040
}
set_left(totalOffset)
changeDot(totalOffset / -520)
}
function autoPlay() {
time = setInterval(() => {
$(".next").onclick()
}, 1000)
}
$(".main").onmouseover = () => {
clearInterval(time)
}
// $(".main").onmouseout = () => {
// autoPlay()
// }
//
// autoPlay()
function set_left(offset) {
$(".swiper").style.left = `${offset}px`;
}
function left() {
return parseInt($(".swiper").style.left)
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}

53
历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/插件版/swiper.css Normal file
View File

@@ -0,0 +1,53 @@
body,ul,li,p{
margin: 0;
padding: 0;
list-style: none;
}
.swiper-container {
width: 100%;
position: relative;
overflow: hidden;
}
.dot {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dot li {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
margin-right: 10px;
}
.dot .active {
background: red;
}
.swiper-wrapper {
position: relative;
display: flex;
}
.swiper_item {
flex-shrink: 0;
width: 100%;
}
.swiper-wrapper img {
width: 100%;
}
.action {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.but {
color: #fff;
font-size: 40px;
}

64
历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/插件版/swiper.html Normal file
View File

@@ -0,0 +1,64 @@
<!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>
<link rel="stylesheet" href="./swiper.css">
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper_item">
<img src="https://img.alicdn.com/imgextra/i1/6000000008079/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" alt="">
</div>
<div class="swiper_item">
<img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
</div>
<div class="swiper_item">
<img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
</div>
</div>
<div class="action">
<div class="but prev"> &lt; </div>
<div class="but next"> &gt; </div>
</div>
<ul class="dot"></ul>
</div>
<button onclick="test()">点我</button>
</body>
<script src="swiper.js"></script>
<script>
var a = new swiper('.swiper-container', {
autoPlay: false,
autoTime: 3000,
navigation: {
nextEl: '.next',
prevEl: '.prev',
},
pagination: {
el: ".dot",
},
})
a.on('slideChange', function (index) {
console.log(index)
})
function test () {
a.slideTo(2)
}
</script>
</html>

183
历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/插件版/swiper.js Normal file
View File

@@ -0,0 +1,183 @@
(() => {
class Swiper {
// 插件默认参数
defaultOption = {
onEvent: {},
timer: null,
el: '',
loop: false,
autoPlay: false,
autoTime: 1000,
initialSlide: 0,
speed: 300,
// 左右按钮
navigation: {
nextEl: null,
prevEl: null,
},
pagination: {
el: null,
},
length: () => {
return this._(".swiper_item").length
},
width: () => {
return document.querySelector(this.defaultOption.el).clientWidth
}
}
constructor(el, option) {
if (typeof el != "string") {
throw new Error("el参数必须是字符串")
}
if (this.$(el) == null) {
throw new Error("el的类名在网页上不存在，请检查")
}
this.defaultOption.el = el;
this.defaultOption.loop = option.loop || this.defaultOption.loop
this.defaultOption.autoPlay = option.autoPlay || this.defaultOption.autoPlay
this.defaultOption.autoTime = option.autoTime || this.defaultOption.autoTime
this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide
this.defaultOption.speed = option.speed || this.defaultOption.speed
this.defaultOption.navigation.prevEl = option?.navigation?.prevEl || this.defaultOption.navigation.prevEl
this.defaultOption.navigation.nextEl = option?.navigation?.nextEl || this.defaultOption.navigation.nextEl
this.defaultOption.pagination.el = option?.pagination?.el || this.defaultOption.pagination.el
this.init()
}
init () {
this.createdDot()
this.initLeft()
if (this.defaultOption.autoPlay) {
this.MouseEvent()
this.autoPlay()
}
this.BindNext()
this.BindPrev()
}
initLeft () {
this.set_left(this.defaultOption.initialSlide * -this.defaultOption.width())
this.changeDot(this.defaultOption.initialSlide)
}
// 事件控制中心 就是 {}
on (EventType, callback) {
this.defaultOption.onEvent[EventType] = callback
}
slideTo(index) {
this.set_left(index * -this.defaultOption.width())
this.changeDot(index)
}
MouseEvent() {
this.$(".swiper-wrapper").onmouseover = () => {
clearInterval(this.defaultOption.timer)
}
this.$(".swiper-wrapper").onmouseout = () => {
this.autoPlay()
}
}
autoPlay () {
this.defaultOption.timer = setInterval(() => {
this.motion(-this.defaultOption.width())
}, this.defaultOption.autoTime)
}
createdDot() {
if (this.defaultOption.pagination.el != null) {
for (var i = 0; i < this.defaultOption.length(); i++) {
this.$(this.defaultOption.pagination.el).innerHTML += `
<li class="${i == 0 ? 'active':''}"></li>
`
}
// 绑定事件
var li = this._(`${this.defaultOption.pagination.el} li`);
li.forEach((v,i) => {
v.onclick = () => {
this.changeDot(i)
}
});
}
}
changeDot(index) {
this.defaultOption.onEvent.hasOwnProperty("slideChange")
? this.defaultOption.onEvent.slideChange(index)
: ''
var li = this._(`${this.defaultOption.pagination.el} li`);
li.forEach((itme) => {
itme.classList.remove("active")
})
li[index].classList.add("active")
this.set_left(index * -this.defaultOption.width())
}
BindPrev() {
this.defaultOption.navigation.prevEl == null
? null
: this.$(this.defaultOption.navigation.prevEl).onclick = () => {
this.motion(this.defaultOption.width())
}
}
BindNext() {
this.defaultOption.navigation.nextEl == null
? null
: this.$(this.defaultOption.navigation.nextEl).onclick = () => {
this.motion(-this.defaultOption.width())
}
}
motion(offset) {
var totalOffset = this.left() + offset;
var maxLenght = -this.defaultOption.width() * (this.defaultOption.length() - 1)
if (totalOffset < maxLenght) {
totalOffset = 0
}
if (totalOffset > 0) {
totalOffset = maxLenght
}
this.set_left(totalOffset)
this.changeDot(totalOffset / -this.defaultOption.width())
}
left() {
return parseInt(this.$(".swiper-wrapper").style.left)
}
set_left(offset) {
this.$(".swiper-wrapper").style.left = `${offset}px`;
}
$(className) {
return document.querySelector(`${this.defaultOption.el} ${className}`)
}
_(className) {
return document.querySelectorAll(`${this.defaultOption.el} ${className}`)
}
}
window.swiper = Swiper
})()

63
历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/笔记.txt Normal file
View File

@@ -0,0 +1,63 @@
1：定位修改left数值
2：css3 平移实现移动
实现的功能：
自定义参数：
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(默认) 设置显示第几张图
功能（方法）：
1：slideChange() 轮播图切换的时候，调用这个方法，返回下标
new Swiper('.swiper-container',{
on:{
slideChange: function(){
alert('改变了，activeIndex为'+this.activeIndex);
},
},
})
mySwiper.on('slideChange', function () {
//...
});
var slideChange = function () {
}
var a = {
slideChange: function () {
},
ddd: fun
}
2：slideTo(index) 传入参数，切换轮播图