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

115
历届学生/陈一航/项目/04-07/index.html Normal file
View File

@@ -0,0 +1,115 @@
<!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,ul,li,input{
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 520px;
height: 280px;
border: 1px solid #000;
overflow: hidden;
position: relative;
margin: 30px auto;
}
.daohang {
position: absolute;
width: 520px;
height: 36px;
top: 50%;
margin-top: -18px;
z-index: 2;
}
.fs {
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
background: #000;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.dh_left {
float: left;
}
.dh_right {
float: right;
}
.lb_img{
width: 1560px;
position: relative;
transition: all 0.3s ease;
}
.lb_img li {
float: left;
}
.yd {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -37.5px;
}
.yd li {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
float: left;
margin-right: 10px;
}
.active {
background: red !important;
}
</style>
</head>
<body>
<div class="main">
<div class="daohang">
<div class="fs dh_left"> < </div>
<div class="fs dh_right"> > </div>
</div>
<ul class="lb_img" style="left: 0px">
</ul>
<ul class="yd">
</ul>
</div>
</body>
<script src="./swiper.js"></script>
<script>
var ListData = [
{ id: 1, href: 'https://www.baidu.com', imgUrl: 'https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg' },
{ id: 1, href: 'https://www.baidu.com', imgUrl: 'https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg' },
{ id: 1, href: 'https://www.baidu.com', imgUrl: 'https://img.alicdn.com/tfs/TB1VZo7x4v1gK0jSZFFXXb0sXXa-520-280.jpg_q90_.webp' }
];
new Swiper({
time: 1,
containerClassName: '.lb_img',
NavigationClassName: '.yd',
next: '.dh_left',
previous: '.dh_right',
data: ListData,
OuterClassName: '.main',
autoPlay: true
})
</script>
</html>

167
历届学生/陈一航/项目/04-07/swiper.js Normal file
View File

@@ -0,0 +1,167 @@
(function (win) {
var timer;
var defaultSetting = {
time: 3,
containerClassName: '.container',
NavigationClassName: '.navigation',
next: '.next',
previous: '.prev',
autoPlay: false,
data: [],
imgWidth: 0,
OuterClassName: '.man'
}
// es5 构造函数
// 主要做 变量的保存和校验
function LunBo(setting) {
defaultSetting.OuterClassName = setting.OuterClassName || defaultSetting.OuterClassName
defaultSetting.time = setting.time || defaultSetting.time
defaultSetting.containerClassName = setting.containerClassName || defaultSetting.containerClassName
defaultSetting.NavigationClassName = setting.NavigationClassName || defaultSetting.NavigationClassName
defaultSetting.next = setting.next || defaultSetting.next
defaultSetting.previous = setting.previous || defaultSetting.previous
defaultSetting.autoPlay = setting.autoPlay || defaultSetting.autoPlay
defaultSetting.data = setting.data || defaultSetting.data
if ( defaultSetting.data.length == 0 || (document.querySelector(defaultSetting.containerClassName) == null ||
document.querySelector(defaultSetting.NavigationClassName) == null||
document.querySelector(defaultSetting.next) == null||
document.querySelector(defaultSetting.previous) == null||
document.querySelector(defaultSetting.OuterClassName) == null )) {
console.error("类名不存在或data数据源为空，请仔细检查")
} else {
this.init()
}
}
LunBo.prototype = {
init() {
this.RenderContainer()
this.RenderNavigation()
this.BindPreviousClick()
this.BindNextClick()
defaultSetting.autoPlay ? this.AutoPlay() : ''
defaultSetting.autoPlay ? this.Seout() : ''
this.Seover()
setTimeout(() => defaultSetting.imgWidth = document.querySelector("img").width, 300)
},
AutoPlay() {
timer = setInterval( () => {
this.OffSetDistance(-defaultSetting.imgWidth)
this.changeActiveYd()
}, (defaultSetting.time)*1000 )
},
Seover(){
this.$(defaultSetting.OuterClassName).onmouseover = () => {
clearInterval(timer)
}
},
Seout(){
this.$(defaultSetting.OuterClassName).onmouseout = () => {
this.AutoPlay()
}
},
// 渲染 轮播图的数据到页面
RenderContainer() {
defaultSetting.data.forEach((val,index) => {
this.$(defaultSetting.containerClassName).innerHTML +=
`
<li>
<a target="_blank" href="${val.href}">
<img src="${val.imgUrl}" alt="">
</a>
</li>
`
});
},
// 渲染小圆点
RenderNavigation() {
defaultSetting.data.forEach((val,index) => {
this.$(defaultSetting.NavigationClassName).innerHTML +=
`
<li class="${index == 0 ? 'active' : ''}"></li>
`
});
this.BindYdClick()
},
changeActiveYd() {
var index = Math.abs(parseInt(this.$(defaultSetting.containerClassName).style.left)) / defaultSetting.imgWidth;
var LiArr = document.querySelectorAll(`${defaultSetting.NavigationClassName} li`);
LiArr.forEach(function(val){
val.className = ""
})
LiArr[index].className = "active"
},
// 小圆点绑定事件
BindYdClick() {
var LiArr = document.querySelectorAll(`${defaultSetting.NavigationClassName} li`);
LiArr.forEach((val,index) => {
val.onclick = () => {
LiArr.forEach(function(v){
v.className = ""
})
val.className = "active"
this.$(defaultSetting.containerClassName).style.left = `${index * -defaultSetting.imgWidth}px`;
}
})
},
// 右侧下一页数
BindPreviousClick() {
this.$(defaultSetting.previous).onclick = () => {
this.OffSetDistance(-defaultSetting.imgWidth)
this.changeActiveYd()
}
},
// 左侧上一页
BindNextClick() {
this.$(defaultSetting.next).onclick = () => {
this.OffSetDistance(defaultSetting.imgWidth)
this.changeActiveYd()
}
},
OffSetDistance(nums) {
var Offset = parseInt(this.$(defaultSetting.containerClassName).style.left) + nums;
// console.log("Offset: ", Offset)
var maxWidth = defaultSetting.imgWidth * (defaultSetting.data.length - 1);
// console.log("maxWidth: ", maxWidth)
this.$(defaultSetting.containerClassName).style.left = `${Offset}px`
if (Offset < -maxWidth ) {
this.$(defaultSetting.containerClassName).style.left = "0px";
}
if (Offset > 0) {
this.$(defaultSetting.containerClassName).style.left = `-${maxWidth}px`;
}
},
$(calssName) {
return document.querySelector(calssName)
}
}
win.Swiper = LunBo
})(window)