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

68
历届学生/王凯/11-05/css/index.css Normal file
View File

@@ -0,0 +1,68 @@
@charset "UTF-8";
body,ul,ol,li {
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 520px;
height: 280px;
border: 1px solid #000;
margin: 30px auto;
position: relative;
overflow: hidden;
}
.main ul li,
.circular-list li {
float: left;
}
.main ul {
width: 2100px;
height: 280px;
position: absolute;
transition: all 0.6s;
}
.main .page-action {
position: absolute;
width: 100%;
top: 50%;
margin-top: -20px;
}
.action-left,.action-right {
width: 40px;
height: 40px;
background: #00000087;
color: #fff;
text-align: center;
line-height: 35px;
font-size: 26px;
border-radius: 100%;
}
.action-left{
float: left;
margin-left: 10px;
}
.action-right {
float: right;
margin-right: 10px;
}
.circular-list {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -36px;
}
.circular-list li {
width: 13px;
height: 13px;
background: #fff;
border-radius: 100%;
margin-right: 5px;
}
.active {
background: #d0c300 !important;
}

47
历届学生/王凯/11-05/demo.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body, ul {
margin: 0;
padding: 0;
}
.main {
width: 520px;
height: 280px;
overflow: hidden;
}
li {
list-style: none;
float: left;
}
.listimg {
width: 2000px;
perspective: 1200px;
transform-style: preserve-3d;
backface-visibility: hidden;
}
li:nth-child(1) {
transform:rotateY(-23deg);
}
li:nth-child(2) {
transform:rotateY(43deg);
}
</style>
</head>
<body>
<div class="main">
<ul class="listimg">
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
</ul>
</div>
</body>
</html>

BIN
历届学生/王凯/11-05/img/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
历届学生/王凯/11-05/img/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
历届学生/王凯/11-05/img/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
历届学生/王凯/11-05/img/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

61
历届学生/王凯/11-05/index.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 轮播</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="main">
<!-- 轮播图片部分 -->
<ul style="left: 0" class="broadcast-wrapper">
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li>
</ul>
<div class="page-action">
<!-- 上一页 -->
<div class="action-left"> < </div>
<!-- 下一页 -->
<div class="action-right"> > </div>
</div>
<ol class="circular-list"></ol>
</div>
</body>
<script src="./js/MyBroadcast.js"></script>
<script>
new Broadcast({
time: 3000,
pageaction: {
// 上一页按钮class
prev: 'action-left',
// 下一页按钮class
next: 'action-right'
}
})
</script>
</html>

161
历届学生/王凯/11-05/js/MyBroadcast.js Normal file
View File

@@ -0,0 +1,161 @@
(function(bom, dom){
// 插件的使用配置
let configDefaults = {
time: 3000,
pageaction: {
prev: 'action-left', // 上一页按钮class
next: 'action-right' // 下一页按钮class
}
}
// 插件程序的配置
let config = {
timer: null,
lengths: document.getElementsByClassName('broadcast-wrapper')[0].getElementsByTagName("li").length,
fatherWrapper: 'broadcast-wrapper',
circular: 'circular-list',
width() {
return document.getElementsByClassName(this.fatherWrapper)[0].getElementsByTagName("li")[0].getElementsByTagName("img")[0].width
},
returnFatherWrapper() {
return document.getElementsByClassName(this.fatherWrapper)[0]
},
totalWidth() {
return parseInt(`-${(this.lengths - 1) * this.width()}`)
},
returnCircular() {
return document.getElementsByClassName(this.circular)[0]
},
createdCircular() {
var html = ""
for (let i = 0; i < this.lengths; i++) {
html+= `<li class="${i == 0 ? 'active' : ''}"></li>`
}
this.returnCircular().innerHTML = html
}
}
var index = 1;
function Broadcast(options) {
if(arguments.length == 0) {
console.error('请传入默认配置')
}else {
configDefaults.time = options.time || configDefaults.time
configDefaults.pageaction.prev = options.pageaction.prev || configDefaults.pageaction.prev
configDefaults.pageaction.next = options.pageaction.next || configDefaults.pageaction.next
this.init()
}
}
Broadcast.prototype = {
// 函数的入口
init(){
config.createdCircular()
this.prevClick()
this.nextClick()
this.autoPlay()
this.autoChangeCircular()
document.getElementsByClassName('main')[0].onmouseover = () => this.stopPlay()
document.getElementsByClassName('main')[0].onmouseout = () => this.autoPlay()
},
// 上一页按钮点击事件
prevClick() {
this.$(configDefaults.pageaction.prev)[0].onclick = () => {
index--
if(index <= 0) {
index = config.lengths
}
this.clickChange()
this.transition(config.width())
}
},
// 下一页按钮点击事件
nextClick() {
this.$(configDefaults.pageaction.next)[0].onclick = () => {
index++
if(index > config.lengths) {
index = 1
}
this.clickChange()
this.transition(parseInt(`-${config.width()}`))
}
},
// 过渡动画的设置
transition(px) {
var offsetLeft = parseInt(config.returnFatherWrapper().style.left),
ow = offsetLeft + px;
if(ow >= config.totalWidth()) {
config.returnFatherWrapper().style.left = `${ow}px`
}else {
config.returnFatherWrapper().style.left = `0px`
}
if(ow > 0) {
config.returnFatherWrapper().style.left = `${config.totalWidth()}px`
}
},
clickChange() {
var Circularli = this.$(config.circular)[0].getElementsByTagName("li")
var Wrapperli = this.$(config.fatherWrapper)[0].getElementsByTagName("li")
for(let i = 0;i<Circularli.length;i++){
if(Circularli[i].className == "active"){
Circularli[i].className = ""
}
}
Circularli[index-1].className="active"
},
autoChangeCircular() {
// 小圆点
var Circularli = this.$(config.circular)[0].getElementsByTagName("li")
var Wrapperli = this.$(config.fatherWrapper)[0].getElementsByTagName("li")
var self = this
for(let i = 0;i<Circularli.length;i++){
Circularli[i].onmouseover = function () {
for(var j = 0;j<Circularli.length;j++){
if(Circularli[j].className == "active"){
Circularli[j].className = ""
}
}
Circularli[i].className="active"
config.returnFatherWrapper().style.left = `${parseInt(`-${i*config.width()}`)}px`
}
}
},
// 自动轮播
autoPlay() {
config.timer = setInterval(() => {
this.$(configDefaults.pageaction.next)[0].onclick()
}, configDefaults.time)
},
// 停止播放
stopPlay() {
clearInterval(config.timer)
},
// 获取元素
$(className){
return document.getElementsByClassName(className)
}
}
bom.Broadcast = Broadcast
})(window, document)