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

197
历届学生/fontendseven/项目练习/上课项目/轮播图/index.html Normal file
View File

@@ -0,0 +1,197 @@
<!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-container {
width: 520px;
height: 280px;
margin: 10% auto;
position: relative;
overflow: hidden;
}
.swiper-wrapper {
position: absolute;
display: flex;
transition: all 0.3s;
}
.swiper-slide {
flex-shrink: 0;
}
.swiper-slide img {
width: 100%;
height: 100%;
}
.swiper-pagination {
display: flex;
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
}
.pagination {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
margin-right: 10px;
cursor: pointer;
}
.pagination:last-child {
margin-right: 0;
}
.swiper-pagination .active {
background: red !important;
}
.swiper-button-prev,
.swiper-button-next {
width: 45px;
height: 45px;
background: rgb(0 0 0 / 58%);
color: #fff;
text-align: center;
line-height: 45px;
font-size: 18px;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 100%;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper" style="left: 0px;">
<div class="swiper-slide">
<img src="https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://img.alicdn.com/imgextra/i2/6000000004940/O1CN01GJOBZe1mMZHhWNN9e_!!6000000004940-0-octopus.jpg"
alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination">
<div class="pagination active"></div>
<div class="pagination"></div>
<div class="pagination"></div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev">&lt;</div>
<div class="swiper-button-next">&gt;</div>
</div>
</body>
<script>
var timer;
$(".swiper-button-next").onclick = () => {
motion(-520)
}
$(".swiper-button-prev").onclick = () => {
motion(520)
}
_(".swiper-pagination .pagination").forEach((v, i) => {
v.onclick = () => {
changePagination(i)
setOffset(i * -520)
}
})
function motion(offset) {
$(".swiper-wrapper").left()
var totalOffset = parseInt($(".swiper-wrapper").style.left) + offset;
if (totalOffset > 0) {
totalOffset = -1040
}
if (totalOffset < -1040) {
totalOffset = 0
}
changePagination(totalOffset / 520 * -1)
setOffset(totalOffset)
}
function changePagination(index) {
var pagination = _(".swiper-pagination .pagination")
pagination.forEach(v => {
v.classList.remove("active")
})
pagination[index].classList.add("active");
}
function autoPlay() {
timer = setInterval(() => {
motion(-520)
}, 3000)
}
autoPlay()
$(".swiper-container").onmouseout = () => {
autoPlay()
}
$(".swiper-container").onmouseover = () => {
clearInterval(timer)
}
function setOffset(offset) {
$(".swiper-wrapper").style.left = `${offset}px`
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

152
历届学生/fontendseven/项目练习/上课项目/轮播图/plugs/index.html Normal file
View File

@@ -0,0 +1,152 @@
<!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-container {
width: 520px;
height: 280px;
margin: 10% auto;
position: relative;
overflow: hidden;
}
.swiper-wrapper {
position: absolute;
display: flex;
transition: all 0.3s;
}
.swiper-slide {
flex-shrink: 0;
}
.swiper-slide img {
width: 100%;
height: 100%;
}
.swiper-pagination {
display: flex;
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
}
.pagination {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
margin-right: 10px;
cursor: pointer;
}
.pagination:last-child {
margin-right: 0;
}
.swiper-pagination .active {
background: red !important;
}
.swiper-button-prev,
.swiper-button-next {
width: 45px;
height: 45px;
background: rgb(0 0 0 / 58%);
color: #fff;
text-align: center;
line-height: 45px;
font-size: 18px;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 100%;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper" style="left: 0px;">
<div class="swiper-slide">
<img src="https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://img.alicdn.com/imgextra/i2/6000000004940/O1CN01GJOBZe1mMZHhWNN9e_!!6000000004940-0-octopus.jpg"
alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev">&lt;</div>
<div class="swiper-button-next">&gt;</div>
</div>
<button>2222</button>
</body>
<script src="./index.js"></script>
<script>
var mySwiper = new Swiper(".swiper-container", {
<<<<<<< HEAD
loop: true,
autoPlay: true,
=======
loop: false,
autoPlay: false,
>>>>>>> 7d44fc1c419dd78aa3574780122af75387181afb
initialSlide: 0,
autoTime: 3000,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
// on: {
// slideChange: function (index) {
// console.log("===== 1", index);
// },
// },
})
mySwiper.on("slideChange", (index) => {
console.log("===== 2", index);
})
document.querySelector("button").onclick = function () {
mySwiper.slideTo(1)
}
</script>
</html>

208
历届学生/fontendseven/项目练习/上课项目/轮播图/plugs/index.js Normal file
View File

@@ -0,0 +1,208 @@
// 自执行函数
(function () {
class Swiper {
constructor(el, option) {
// 插件的默认配置参数
this.defaultOption = {
timer: null,
el: '.swiper-container',
wrapper: '.swiper-wrapper',
slide: '.swiper-slide',
loop: false,
autoPlay: false, // 完成
autoTime: 3000, // 完成
initialSlide: 0, // 完成
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
length: function () {
return _(`${this.el} ${this.slide}`).length - 1;
},
width: function () {
return $(this.el).offsetWidth;
},
container: function() {
return $(this.el);
},
wrap: function(offset) {
return $(`${this.el} ${this.wrapper}`).left(offset)
},
next: function () {
return $(`${this.el} ${this.navigation.nextEl}`)
},
prev: function () {
return $(`${this.el} ${this.navigation.prevEl}`)
},
pag: function () {
return $(`${this.el} ${this.pagination.el}`)
},
child: function () {
return _(`${this.el} ${this.pagination.el} ${this.pagination.child}`)
},
pagination: {
el: '.swiper-pagination',
child: '.pagination'
},
// 事件控制中心
EventController: {
}
}
// 必传参数的校验
if (typeof el == "string" && document.querySelector(el) != null) {
// 可选参数
this.defaultOption.el = el || this.defaultOption.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;
for (const key in option.on) {
this.defaultOption.EventController[key] = option.on[key]
}
this.defaultOption.navigation.nextEl = option?.navigation?.nextEl || this.defaultOption.navigation.nextEl;
this.defaultOption.navigation.prevEl = option?.navigation?.prevEl || this.defaultOption.navigation.prevEl;
this.defaultOption.pagination.el = option?.pagination?.el || this.defaultOption.pagination.el;
if (this.defaultOption.initialSlide > this.defaultOption.length()) {
throw new Error("initialSlide 下标不合理")
}
// console.log();
this.init();
} else {
throw new Error("el必须是字符串，且class类名有效！！")
}
}
init() {
this.prototypeMethods()
this.createdPagination()
this.setInitialSlide()
this.next()
this.prev()
this.defaultOption.autoPlay ? this.autoPlay() : ''
this.defaultOption.autoPlay
? this.defaultOption.container().onmouseout = () => this.autoPlay()
: ''
this.defaultOption.container().onmouseover = () => clearInterval(this.defaultOption.timer);
}
/**
* 下一页按钮的点击事件
*/
next() {
this.defaultOption.next().onclick = () => {
this.motion(-this.defaultOption.width())
}
}
prev() {
this.defaultOption.prev().onclick = () => {
this.motion(this.defaultOption.width())
}
}
setInitialSlide() {
this.defaultOption.wrap(this.defaultOption.initialSlide * -this.defaultOption.width())
this.changePagination(this.defaultOption.initialSlide)
}
motion(offset) {
var maxOffset = -this.defaultOption.length() * this.defaultOption.width();
var totalOffset = this.defaultOption.wrap() + offset;
if (totalOffset > 0) {
this.defaultOption.loop ? totalOffset = maxOffset : totalOffset = -0
}
if (totalOffset < maxOffset) {
this.defaultOption.loop ? totalOffset = 0 : totalOffset = maxOffset
}
this.defaultOption.EventController.slideChange &&
this.defaultOption.EventController.slideChange(
Math.abs(totalOffset / this.defaultOption.width())
)
this.changePagination(totalOffset / this.defaultOption.width() * -1)
this.defaultOption.wrap(totalOffset)
}
createdPagination() {
for (var i = 0; i <= this.defaultOption.length(); i++) {
this.defaultOption.pag().innerHTML += `
<div class="pagination ${i == 0 ? 'active' : ''}"></div>
`
}
this.defaultOption.child().forEach((v, i) => {
v.onclick = () => {
this.changePagination(i)
this.defaultOption.wrap(i * -this.defaultOption.width())
}
})
}
changePagination(index) {
var pagination = this.defaultOption.child()
pagination.forEach(v => {
v.classList.remove("active")
})
pagination[index].classList.add("active");
}
autoPlay() {
this.defaultOption.timer = setInterval(() => {
this.motion(-this.defaultOption.width())
}, this.defaultOption.autoTime)
}
on(methodsName, callback) {
this.defaultOption.EventController[methodsName] = callback
}
slideTo(index) {
this.changePagination(index)
this.defaultOption.wrap(index * -this.defaultOption.width())
}
prototypeMethods() {
HTMLDivElement.prototype.left = function (offset) {
if (this.className.includes("swiper-wrapper")) {
if (offset == undefined) {
return parseInt(this.style.left)
} else {
this.style.left = `${offset}px`
}
}
return null
}
}
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
window.Swiper = Swiper
})()

63
历届学生/fontendseven/项目练习/上课项目/轮播图/笔记.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() 轮播图切换的时候，调用这个方法，返回下标
var mySwiper = 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) 传入参数，切换轮播图
mySwiper.slideTo(1)