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

75
历届学生/18课程/class18_2/项目/练习项目/周志威/轮播图/功能版/css/index.css Normal file
View File

@@ -0,0 +1,75 @@
.main {
width: 520px;
height: 290px;
margin: 40px auto;
}
@font-face {font-family: "iconfont";
src: url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.eot?t=1608534888851'); /* IE9 */
src: url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.eot?t=1608534888851#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.woff?t=1608534888851') format('woff'),
url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.ttf?t=1608534888851') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.svg?t=1608534888851#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-bangzhujinru:before {
content: "\e64e";
}
.icon-back:before {
content: "\e608";
}
.swiper-container {
height: 100%;
overflow-x: hidden;
position: relative;
}
.swiper-wrapper {
display: flex;
transition-duration: 0.3s;
}
.swiper-pagination {
position: absolute;
display: flex;
z-index: 99;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.swiper-pagination-dot {
width: 15px;
height: 15px;
background: #fff;
border-radius: 100%;
margin-right: 10px;
cursor: pointer;
}
.dot-active {
background: red;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev,
.swiper-button-next{
cursor: pointer;
font-size: 25px;
color: white;
padding: 5px 2px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,.3);
}

51
历届学生/18课程/class18_2/项目/练习项目/周志威/轮播图/功能版/index.html Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../功能版/css/index.css">
<style>
body,h1,h3,h2,h4,h5,h6,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<div class="main">
<div class="swiper-container">
<div class="swiper-wrapper" style="transform: translateX(0px);">
<div class="swiper-slide">
<img src="https://gw.alicdn.com/imgextra/i3/1725301/O1CN01EFbPcV1p1uBtr9RQd_!!1725301-0-lubanu.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://a1.alicdn.com/assets/p4p-fallback/mm_12852562_1778064_13672849.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://gw.alicdn.com/imgextra/i3/1725301/O1CN01124Tg31p1uBk2wbua_!!1725301-0-lubanu.jpg" alt="">
</div>
</div>
<!--小圆点-->
<div class="swiper-pagination">
<div class="swiper-pagination-dot dot-active"></div>
<div class="swiper-pagination-dot"></div>
<div class="swiper-pagination-dot"></div>
</div>
<!--上一页，下一页按钮-->
<div class="iconfont icon-back swiper-button-prev"></div>
<div class="iconfont icon-bangzhujinru swiper-button-next"></div>
</div>
</div>
</body>
<script src="../功能版/js/index.js"></script>
</html>

103
历届学生/18课程/class18_2/项目/练习项目/周志威/轮播图/功能版/js/index.js Normal file
View File

@@ -0,0 +1,103 @@
var timer;
// 下一页
$(".swiper-button-next").onclick = function () {
animation(-520)
}
// 上一页
$(".swiper-button-prev").onclick = function () {
animation(520)
}
// 计算移动距离，和越界处理
function animation(offset) {
var oldOffset = parseInt($(".swiper-wrapper").style.transform.substring(11));
var newOffset = oldOffset + offset;
if (newOffset < -1040) {
newOffset = 0
};
if (newOffset > 0) {
newOffset = -1040
};
changeX(newOffset)
changeDot(Math.abs(newOffset / 520))
}
// 让图片动起来
function changeX(x) {
$(".swiper-wrapper").style = `
transform: translateX(${x}px);
`
}
// 绑定小圆点的点击事件
var dot = $(".swiper-pagination .swiper-pagination-dot")
dot.forEach(function (v,i){
v.onclick = function () {
changeDot(i)
}
})
// 切换小圆点
function changeDot(i) {
dot.forEach(function (val,index){
val.classList.remove("dot-active")
})
dot[i].classList.add("dot-active")
changeX(i*-520)
}
// 鼠标悬浮，清除定时器
$(".swiper-container").onmousemove = function () {
clearInterval(timer)
}
// 鼠标离开，自动播放
$(".swiper-container").onmouseout = function () {
AutoPlay()
}
function AutoPlay() {
// 定时器，自动播放
timer = setInterval(function (){
$(".swiper-button-next").onclick()
}, 500)
}
AutoPlay()
// 模仿框架jq实现 $ 功能
function $(className) {
var classNameArr = className.split(" ");
if (classNameArr.length == 1) {
return document.querySelector(className)
} else {
// 多类名的时候，获取最后一个类名的上一个类名
var fatherClassName = classNameArr[classNameArr.length-2];
// 获取最后一个类名
var lastClassName = classNameArr[classNameArr.length -1];
var NewArr = []
// 获取父级有多少个子元素
var childrenList = document.querySelector(fatherClassName).children;
// 返回你要的子元素
for (let i = 0; i < childrenList.length; i++) {
if (childrenList[i].className.indexOf(lastClassName.replace(".","")) != -1) {
NewArr.push(childrenList[i])
}
}
return NewArr.length == 1 ? NewArr[0] : NewArr
}
}

74
历届学生/18课程/class18_2/项目/练习项目/周志威/轮播图/插件版/css/index.css Normal file
View File

@@ -0,0 +1,74 @@
.main {
width: 520px;
height: 290px;
margin: 40px auto;
}
@font-face {font-family: "iconfont";
src: url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.eot?t=1608534888851'); /* IE9 */
src: url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.eot?t=1608534888851#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAa0AAsAAAAADHQAAAZkAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEGAqKRIhLATYCJAMoCxYABCAFhG0HgREbmgrIHpIkSMABBxIoIGJnOB7o12jvy66fajqHqBrVunn00CDhKUtoDJ3sJdz/T6f9ffPCmbDidOFCXJVKkwl80qRaOfnfyVIMvph+AAR5u59UpChEMVGLbCMWxv9/zNelNVheX4DsTKnqvZ2TRVH1ZqPxBAcUv9sqwL4VAX4bsfmHqwCz0XVcTkBr0TToWMWMRuDJeLuAcFejkgEv45Ib+EFtLysOzRDeAFsdVxEPAbwO/j78h5TggahIwFc6fb1cAUW/YPQ8Xvj/Qp1pISzaXgCjo0jYCmTC58rQWzjKboW1i7uz3AZGSWDxF/j5/jR/nn+Wf4n/yOj5//+nqJJH4kAwKspB/+aBWqkSNKKskAglwNZbzGe5hl/ggJpfDiUQHw4VUBocAlAedP3QLDhEoCVwyEBHEFB4OvRAniJ6e8g4MA3CJ4A4D8w6Jp1EhYSiYC1JK4LJHBQWwxcQlbX75InS0MCIQCGas9Vddts7BhlTSB7eS4u0XmTfv+jARPGufRv3mtEaJ7UIUWtcoSAOlGtNsGO1C1m7BFOUK5RYu3ecaPf+CDz/bGoOo6hTKdGw5PTzGPaWF5nUEV+m8JQnnjr1LJq18emIcy+wXu2jpI4DiL1ofwhpXx1y/DIpsF9McjpJw84e1rFv4V6F19vs87V4PE1ud/tNN73NU37HN3a7dw5LhMVIxJKyKTREQfuAhLeF0NvzqXL/efvZSYq9W4Nd+9IpQr+Kwus3UJRjXRhBdb0bps4cCF2zfUojSaw9OI7EO65XkDevxhHk7sMIH8TDkKFrQlUHHJMZV3Cw3UmaXBv32kOUqxeFqtY49m0MUsxpvuFDB8V3uxs3cfhmN7kcoWvWWw7yDAvdeXanM+iim/R65zjObdo4SXOJvXdv3p9yuaD5srdg/+YtF6iWOX2/Hx7k+Xy869TEC6MtIb3nuaQRFf74hF1Z01vrpNjAhO+u7Y2xMhw8182/HPNpypiHYYcmH/ro8tVHvPc/PA50IcBsvV7nV/rD6673IglAPESHC4vMM/D7SQ+T3sczzEVCGEnS+fb5jpZTN05dB9iT6TJzJQ/zK81borMqZWMWZVYKt5gr+ZhXmXF9xVVCjEVYWCb0Ligmrp6m/t6NYvljuAmpk/+iBCqRNEqk4ntqkV6PatXQuCNJSX5tVRWb7eDa4DSQ9OMbmDeg8XyOsKG6Me36j415QwsWln3SdarxVBndDxTEraVvBrxIfzFmyZtPanWTH0izMzkls2W7qkld+JJwHVm9S5Z+cE5mtvThJF3tk/Flw4PU11uVfPaWoiVFR9h8ZuvfUYPDCKOq8elL34xLkS55s2x89fB+4EfuI7xv7Ht92kdjH8k73hu7Hz8szYeMO7Wt9djUOaV487PnW1wzHmpwq80vnm3EZcPxWe3tayPXasNPNRBLDh9ajJfgQ4fM++bHGzYgROOzhviCxcThw5DxlkWXn7yUUd+x7kjljLEZ5jg851BLx6HG1mq873pw1DcAu5ePdXz068MsUZM6uiWbH/pgRq0Gdb16Lqck6B5/vb0E2q5BqbIr7SWI1BSHMqWFPUsAPPgGwObIkI4Hwh3/TTWrZzqI4///b3NBxnjhIn3ih1iK1S+NEF8DkL4Qy5HvaSOe8zvbzPeIC5/3iPN+5VF/vcRPjl5tjWynRi2i1v+qHBk1UP4zLY3sbvOc4GiUxKLhx5u7hs3Hz6GVGX5NsVEfbBtPqOsJahMJRJUFSGpL1MzcCoXONijVDkJri8qjO2MssJD5wIZlBoJhRyAa9BWSYY+omfk+FCZ9C6XhwNC6GAJP2VkJDVlqYWRWRkH3DdMaucmotL1WMmysZ1Q2vcySNgaCZsbSr0nQyQlJ+UIlY2Qs29ijf0CVYrUqaaXFZKArzNUYvd5Emy0mLSO3JqitVnNOYqKy6okS5CYDkI6yYMhYMRRofYbRNORMjJTefCuy8Pv1GCo2ejKWBuJCsRnDop9mcVqyBEkKaqXNqCIeS3u/ASoprBRQop1+CxMDWgUFGHrJmtDM1RtpMeSsEqh7pM1yJNI0pdaWsH9seLSNf9YJfPc2EAgjFmIjDuIiHuIjElFQP1HLjCqtRiboCzYaUdu0GqPFxh3SVJyWpzLZBm1yNcNSmwwMq08m1wUPaYywGm+drlu1XG2TGeN5rTXuGq5CY1QNMhoAAAAA') format('woff2'),
url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.woff?t=1608534888851') format('woff'),
url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.ttf?t=1608534888851') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('http://at.alicdn.com/t/font_2269051_qnai6klgxf.svg?t=1608534888851#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-bangzhujinru:before {
content: "\e64e";
}
.icon-back:before {
content: "\e608";
}
.swiper-container {
height: 100%;
overflow-x: hidden;
position: relative;
}
.swiper-wrapper {
display: flex;
}
.swiper-pagination {
position: absolute;
display: flex;
z-index: 99;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.swiper-pagination-dot {
width: 15px;
height: 15px;
background: #fff;
border-radius: 100%;
margin-right: 10px;
cursor: pointer;
}
.dot-active {
background: red;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev,
.swiper-button-next{
cursor: pointer;
font-size: 25px;
color: white;
padding: 5px 2px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,.3);
}

83
历届学生/18课程/class18_2/项目/练习项目/周志威/轮播图/插件版/index.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../插件版/css/index.css">
<style>
body,
h1,
h3,
h2,
h4,
h5,
h6,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<div class="main">
<div class="swiper-container">
<div class="swiper-wrapper" style="transform: translateX(0px);">
<div class="swiper-slide">
<img src="https://gw.alicdn.com/imgextra/i3/1725301/O1CN01EFbPcV1p1uBtr9RQd_!!1725301-0-lubanu.jpg"
alt="">
</div>
<div class="swiper-slide">
<img src="https://a1.alicdn.com/assets/p4p-fallback/mm_12852562_1778064_13672849.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://gw.alicdn.com/imgextra/i3/1725301/O1CN01124Tg31p1uBk2wbua_!!1725301-0-lubanu.jpg"
alt="">
</div>
</div>
<!--小圆点-->
<div class="swiper-pagination"></div>
<!--&lt;!&ndash;上一页，下一页按钮&ndash;&gt;-->
<div class="iconfont icon-back swiper-button-prev"></div>
<div class="iconfont icon-bangzhujinru swiper-button-next"></div>
</div>
</div>
</body>
<script src="../插件版/js/index.js"></script>
<script>
var a = new Swiper({
el: '.swiper-container',
autoPlay: true,
autoTime: 2000,
loop: false,
initialSlide: 1,
on: {
slideChange: function(index){
console.log("1:",index)
},
},
});
a.on("slideChange", function (index) {
console.log("2:",index)
});
a.slideTo(0)
// a.on("test", function (index) {
// console.log(index)
// })
</script>
</html>

274
历届学生/18课程/class18_2/项目/练习项目/周志威/轮播图/插件版/js/index.js Normal file
View File

@@ -0,0 +1,274 @@
(function () {
// 插件的默认参数
var defaultOption = {
el: '.swiper-container',
reverse: true,
eventBus: {},
timer: null,
statusCallChangeX: true,
containerWidth: function () {
return $(this.el).clientWidth
},
loop: false,
autoPlay: false,
autoTime: 300,
speed: 300,
direction: 'horizontal',
initialSlide: 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
}
};
// 模拟类
function Swiper(option) {
if (option.hasOwnProperty("el") && option.el.length != 0) {
defaultOption.el = option.el;
defaultOption.loop = option.loop || defaultOption.loop;
defaultOption.autoPlay = option.autoPlay || defaultOption.autoPlay;
defaultOption.autoTime = option.autoTime || defaultOption.autoTime;
defaultOption.speed = option.speed || defaultOption.speed;
defaultOption.direction = option.direction || defaultOption.direction;
defaultOption.initialSlide = option.initialSlide || defaultOption.initialSlide;
defaultOption.speed = option.speed || defaultOption.speed;
if (option.hasOwnProperty("navigation")) {
if (option.navigation.hasOwnProperty("nextEl") ) {
defaultOption.navigation.nextEl = option.navigation.nextEl
}
if (option.navigation.hasOwnProperty("prevEl") ) {
defaultOption.navigation.prevEl = option.navigation.prevEl
}
}
if (option.hasOwnProperty("on")) {
for (const key in option.on) {
if (!defaultOption.eventBus.hasOwnProperty(key)) {
defaultOption.eventBus[key] = option.on[key];
} else {
throw new Error(`方法：${key}已经存在`)
}
}
}
this.init()
} else {
throw new Error("缺少必填参数el或el为空");
}
}
Swiper.prototype = {
init() {
this.createdDot();
this.initialSlide();
this.bindNextEl();
this.bindPrevEl();
defaultOption.autoPlay ? this.AutoPlay() : '';
},
//默认显示第几张轮播图
initialSlide() {
var offset = -defaultOption.initialSlide * defaultOption.containerWidth();
this.changeX(offset);
this.DotChange(defaultOption.initialSlide)
},
//下一页
bindNextEl () {
if ($(defaultOption.navigation.nextEl) != null) {
$(defaultOption.navigation.nextEl).onclick = () => {
this.loopChange("next")
}
}
},
//上一页
bindPrevEl () {
if ($(defaultOption.navigation.prevEl) != null) {
$(defaultOption.navigation.prevEl).onclick = () => {
this.loopChange("prev")
}
}
},
//计算移动距离，和越界处理
animation(offset) {
var oldOffset = parseInt($(".swiper-wrapper").style.transform.substring(11));
var newOffset = oldOffset + offset;
if (newOffset < -1040) {
newOffset = 0
};
if (newOffset > 0) {
newOffset = -1040
};
this.DotChange(
Math.abs(newOffset / defaultOption.containerWidth())
);
this.changeX(newOffset)
},
//创建小圆点
createdDot() {
// 如果没有小圆点的父级dom元素，那么不创建小圆点
if ($(defaultOption.pagination.el) != null) {
var Slide = $(".swiper-wrapper .swiper-slide");
Slide.forEach((v,i) => {
$(defaultOption.pagination.el).innerHTML +=
`<div class="swiper-pagination-dot ${i == 0 ? 'dot-active': ''}"></div>`
});
// 绑定事件
var children = $(`${defaultOption.pagination.el} swiper-pagination-dot`)
children.forEach((v,i) => {
v.onclick = () => {
this.DotChange(i)
}
});
}
},
//小圆点切换
DotChange(index) {
// 保存最新的下标
defaultOption.initialSlide = index;
// 调用事件，回传最新下标给用户的方法
defaultOption.eventBus.slideChange
&& defaultOption.eventBus.slideChange(defaultOption.initialSlide)
// 改变小圆点的激活样式
var children = $(defaultOption.pagination.el).children;
for (var i = 0; i < children.length; i++) {
children[i].classList.remove("dot-active")
}
children[index].classList.add("dot-active")
// 移动轮播图
this.changeX(index*-defaultOption.containerWidth())
},
// 图片移动
changeX(x) {
var style = null;
// 通过变量 statusCallChangeX 判断方法是否是第一次执行，如果是第一次执行
// 那么不需要 transition-duration 动画时间
// 主要是解决：initialSlide 的bug
if (defaultOption.statusCallChangeX) {
style = `transform: translateX(${x}px);`;
} else {
style =`
transition-duration: ${defaultOption.speed/1000}s;transform: translateX(${x}px);`
}
defaultOption.statusCallChangeX = false;
$(".swiper-wrapper").style = style
},
//自动播放
AutoPlay() {
timer = setInterval(
() => {
// 如果开启了循环播放
if (defaultOption.loop) {
// 向下一页播放
this.loopChange("next")
} else {
// 如果不是最后一张
if (defaultOption.initialSlide != $(".swiper-wrapper").children.length - 1) {
// 因为这行代码会被重复执行，所以需要做一个变量来决定轮播图移动的方向
// 进而判断向什么方向保持继续移动
if (defaultOption.reverse) {
this.loopChange("next")
} else {
this.loopChange("prev")
}
} else {
this.loopChange("prev")
defaultOption.reverse = false
}
// 判断是否是第一张，如果是第一张，那么改变方向(下一页)
if (defaultOption.initialSlide == 0) {
defaultOption.reverse = true
}
}
},
defaultOption.autoTime);
$(defaultOption.el).onmousemove = () => clearInterval(timer);
$(defaultOption.el).onmouseout = () => this.AutoPlay();
},
//循环切换的公共代码封装
loopChange(type) {
if (defaultOption.loop) {
this.animation(type == 'next' ? -defaultOption.containerWidth() : defaultOption.containerWidth())
} else {
if (defaultOption.initialSlide != (type == "next" ? $(".swiper-wrapper").children.length - 1 : 0)
) {
this.animation(type == 'next' ? -defaultOption.containerWidth() : defaultOption.containerWidth())
}
}
},
// 对外暴露的方法
// 事件控制中心
on(methodsName, callBack) {
if (!defaultOption.eventBus.hasOwnProperty(methodsName)) {
defaultOption.eventBus[methodsName] = callBack;
switch (methodsName) {
case 'slideChange':
defaultOption.eventBus[methodsName](defaultOption.initialSlide)
break;
}
} else {
throw new Error(`方法：${methodsName}已经存在`)
}
},
//切换轮播图
slideTo(index = 0) {
this.changeX(-index * defaultOption.containerWidth());
this.DotChange(index)
}
}
function $(className) {
var classNameArr = className.split(" ");
if (classNameArr.length == 1) {
return document.querySelector(className)
} else {
// 多类名的时候，获取最后一个类名的上一个类名
var fatherClassName = classNameArr[classNameArr.length-2];
// 获取最后一个类名
var lastClassName = classNameArr[classNameArr.length -1];
var NewArr = []
// 获取父级有多少个子元素
var childrenList = document.querySelector(fatherClassName).children;
// 返回你要的子元素
for (let i = 0; i < childrenList.length; i++) {
if (childrenList[i].className.indexOf(lastClassName.replace(".","")) != -1) {
NewArr.push(childrenList[i])
}
}
return NewArr.length == 1 ? NewArr[0] : NewArr
}
}
window.Swiper = Swiper
})()
// 自执行函数