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

30
历届学生/韩想/项目开发/课程项目/轮播图/Swiper.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/swiper.css">
<script src="js/swiper.js"></script>
</head>
<body>
<div class="app"></div>
</body>
<script>
var aaaa = [
{ img: './img/1.jpeg', href: '', title: '哈哈' },
{ img: './img/2.jpg',href: '', title: '妮妮' },
{ img: './img/3.jpg', href: '', title: '开心' }
];
new Swiper({
el: '.app',
time: 1,
isAction: true,
data: aaaa,
imgClick: function (el,index) {
console.log(el)
console.log(index)
}
});
</script>
</html>

64
历届学生/韩想/项目开发/课程项目/轮播图/css/swiper.css Normal file
View File

@@ -0,0 +1,64 @@
body, ul, li{
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.main {
width: 520px;
height: 280px;
border: 1px solid #000;
margin: 80px auto;
position: relative;
overflow: hidden;
}
.main .pic{
width: 1560px;
position: absolute;
transition: all ease 0.4s;
}
.main li {
float: left;
}
.main img {
width: 520px;
height: 280px;
}
.yd {
position: absolute;
z-index: 2;
left: 50%;
margin-left: -43.5px;
bottom: 12px;
}
.yd li {
width: 20px;
height: 20px;
background: #fff;
margin-right: 9px;
border-radius: 100%;
}
.active {
background: red !important;
}
.action {
position: absolute;
top: 50%;
z-index: 3;
width: 100%;
margin-top: -26.5px;
}
.left {
font-size: 38px;
color: #fff;
float: left;
cursor: pointer;
}
.right {
font-size: 38px;
color: #fff;
float: right;
cursor: pointer;
}

BIN
历届学生/韩想/项目开发/课程项目/轮播图/img/1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
历届学生/韩想/项目开发/课程项目/轮播图/img/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
历届学生/韩想/项目开发/课程项目/轮播图/img/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 309 KiB

177
历届学生/韩想/项目开发/课程项目/轮播图/index.html Normal file
View File

@@ -0,0 +1,177 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
body, ul, li{
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.main {
width: 520px;
height: 280px;
border: 1px solid #000;
margin: 80px auto;
position: relative;
overflow: hidden;
}
.main .pic{
width: 1560px;
position: absolute;
transition: all ease 0.4s;
}
.main li {
float: left;
}
.main img {
width: 520px;
height: 280px;
}
.yd {
position: absolute;
z-index: 2;
left: 50%;
margin-left: -43.5px;
bottom: 12px;
}
.yd li {
width: 20px;
height: 20px;
background: #fff;
margin-right: 9px;
border-radius: 100%;
}
.active {
background: red !important;
}
.action {
position: absolute;
top: 50%;
z-index: 3;
width: 100%;
margin-top: -26.5px;
}
.left {
font-size: 38px;
color: #fff;
float: left;
cursor: pointer;
}
.right {
font-size: 38px;
color: #fff;
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<ul class="pic" style="left: 0px">
<li><img src="https://aecpm.alicdn.com/tfscom/TB1CaY1PFXXXXaDXVXXXXXXXXXX.png" alt=""></li>
<li><img src="https://img.alicdn.com/simba/img/TB11SZkQFP7gK0jSZFjSuw5aXXa.jpg" alt=""></li>
<li><img src="https://img.alicdn.com/imgextra/i3/2207127032772/O1CN01QoTCUp1WLcVg3hv8t_!!2207127032772.jpg" alt=""></li>
</ul>
<!-- 小圆点 -->
<ul class="yd">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="action">
<div class="left"><</div>
<div class="right">></div>
</div>
</div>
</body>
<script>
var Pic = document.querySelector(".pic"),
LeftAction = document.querySelector(".left"),
RightAction = document.querySelector(".right"),
Main = document.querySelector(".main"),
YdLi = document.querySelectorAll(".yd li");
var AutoPlay;
LeftAction.onclick = function () {
change(520)
}
function change(off) {
var oldLeft = parseInt(Pic.style.left);
var newLeft = oldLeft + (off);
var index = parseInt(`${(newLeft / -520)}`);
if (newLeft > 0) {
newLeft = -1040
index = 2
}
if (newLeft < -1040) {
newLeft = 0;
index = 0
}
ClearActive()
YdLi[index].className = "active";
dh(newLeft)
}
RightAction.onclick = function () {
change(-520)
}
function dh(slide) {
Pic.style.left = `${slide}px`
}
YdLi.forEach(function (v,ix){
v.onclick = function () {
ClearActive()
this.className = "active"
var left = ix * -520;
dh(left)
}
})
function ClearActive() {
YdLi.forEach(function (a,b){
a.className = ""
});
}
Main.onmouseover = function () {
clearInterval(AutoPlay)
}
Main.onmouseout = function () {
Auto()
}
function Auto() {
AutoPlay = setInterval(function (){
RightAction.onclick()
}, 2000);
}
Auto()
</script>
</html>

245
历届学生/韩想/项目开发/课程项目/轮播图/js/swiper.js Normal file
View File

@@ -0,0 +1,245 @@
// 自执行（匿名）函数
(function () {
// 默认参数
var defaultOption = {
time: 3,
imgClick: function () {
}
};
var DomEle = {
main: null,
Dot: null,
Pic: null,
Action: null,
LeftAction: null,
RightAction: null,
ImgWidth: 0,
AutoPlay: null,
};
function swiper (Option) {
if (Option.hasOwnProperty("el") && document.querySelector(Option.el) !== null) {
if (Option.hasOwnProperty("data") && Option.data.length !== 0) {
// 可选参数的合并
Object.assign(defaultOption, Option)
this.init()
} else {
console.error(`data未传，或是data数组为空，请检查`)
}
} else {
console.error(`el未传，或是类名${Option.el}不存在，请检查`)
}
}
swiper.prototype = {
init: function () {
console.log("检查工作已经结束，开始绘制轮播图")
// 创建dom，追加到网页上
this.CreatedMain();
this.CreatedPic();
this.CreatedYd();
document.querySelector(defaultOption.el).appendChild(DomEle.main);
if (defaultOption.isAction) {
this.CreatedAction()
this.BindRightClick();
this.BindLeftClick();
}
this.BindClickYdLi();
this.BindOnmouseover();
this.BindOnmouseout();
this.Auto();
},
/**
* 绑定左边按钮的点击事件
* @constructor
*/
BindLeftClick() {
DomEle.LeftAction.onclick = () => this.change(DomEle.ImgWidth)
},
/**
* 绑定右边按钮的点击事件
* @constructor
*/
BindRightClick: function () {
// var dd = this;
DomEle.RightAction.onclick = () => this.change(-DomEle.ImgWidth)
},
BindClickYdLi() {
var self = this;
DomEle.Dot.childNodes.forEach(function (v,ix){
v.onclick = function () {
self.ClearActive()
this.className = "active"
var left = ix * -DomEle.ImgWidth;
DomEle.Pic.style.left = `${left}px`
}
})
},
/**
* 鼠标悬停
* @constructor
*/
BindOnmouseover() {
DomEle.main.onmouseover = function () {
clearInterval(DomEle.AutoPlay)
}
},
/**
*
* @constructor
*/
BindOnmouseout() {
DomEle.main.onmouseout = () => {
this.Auto()
}
},
Auto() {
DomEle.AutoPlay = setInterval(() => {
this.change(-DomEle.ImgWidth)
}, defaultOption.time * 1000);
},
/**
* 主要动画过渡
* @param off number 传入的偏移距离
*/
change: function (off) {
var oldLeft = parseInt(DomEle.Pic.style.left);
var newLeft = oldLeft + (off);
var index = parseInt(`${(newLeft / -DomEle.ImgWidth)}`);
if (newLeft > 0) {
newLeft = -( (defaultOption.data.length-1) * DomEle.ImgWidth )
index = 2
}
if (newLeft < -( (defaultOption.data.length-1) * DomEle.ImgWidth )) {
newLeft = 0;
index = 0
}
this.ClearActive()
DomEle.Dot.childNodes[index].className = "active";
DomEle.Pic.style.left = `${newLeft}px`
},
ClearActive() {
DomEle.Dot.childNodes.forEach(function (a,b){
a.className = ""
});
},
/**
* 创建最外层父节点main
* @constructor
*/
CreatedMain: function () {
DomEle.main = document.createElement("div")
DomEle.main.className = "main";
},
/**
* 图片父节点
* @constructor
*/
CreatedPic: function () {
DomEle.Pic = document.createElement("ul");
DomEle.Pic.className = "pic";
DomEle.Pic.style.left = "0px"
defaultOption.data.forEach((val,index)=> {
DomEle.Pic.innerHTML += `
<li>
${
val.hasOwnProperty("href")
? `<a href="${val.href}" target="_blank"><img src="${val.img}"></a>`
: `<img src="${val.img}" >`
}
</li>
`
});
if (defaultOption.data[0].hasOwnProperty("href")) {
DomEle.ImgWidth = DomEle.Pic.children[0].children[0].children[0].width;
} else {
DomEle.ImgWidth = DomEle.Pic.children[0].children[0].width;
DomEle.Pic.querySelectorAll("li").forEach((val,index)=> {
val.onclick = function () {
defaultOption.imgClick(val,index)
}
})
}
DomEle.main.appendChild(DomEle.Pic)
},
/**
* 左右翻页按钮父节点
* @constructor
*/
CreatedAction: function () {
DomEle.Action = document.createElement("div");
DomEle.LeftAction = document.createElement("div");
DomEle.RightAction = document.createElement("div");
DomEle.Action.className = "action";
DomEle.LeftAction.className = "left";
DomEle.RightAction.className = "right";
DomEle.LeftAction.innerText = "<";
DomEle.RightAction.innerText = ">";
DomEle.Action.appendChild(DomEle.LeftAction)
DomEle.Action.appendChild(DomEle.RightAction)
DomEle.main.appendChild(DomEle.Action)
},
/**
* 小圆点的父节点
* @constructor
*/
CreatedYd: function () {
DomEle.Dot = document.createElement("ul");
DomEle.Dot.className = "yd";
defaultOption.data.forEach((val,index)=> {
DomEle.Dot.innerHTML += `<li class="${ index == 0 ? 'active': '' }"></li>`
});
DomEle.main.appendChild(DomEle.Dot)
},
}
window.Swiper = swiper
})()
// function data() {
// var name = "ddd"
// console.log(name)
// console.log(this.name)
// }
//
// data.prototype.name = "dddd"
//
// new data()
// class data {
// constructor() {
//
// }
//
// }
//
// new data()