晚上下班，周例会内容和自己无关，于是带上电脑，写了个轮播图的demo。
鉴于肯定过几天就会把文件放垃圾箱， 故在此记录一下， 有机会完善下移动到自己博客
talk is cheap show me the code
<!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>slider demo</title>
<style>
.wrapper{
position: relative;
height: 200px;
overflow: hidden;
}
.container{
position: absolute;
top: 0;
left: 0;
height: 200px;
transition: left .7s;
}
.slider{
/* position: absolute; */
float: left;
width: 100%;
height: 200px;
}
.slider:nth-child(1){
background-color: #3ff;
}
.slider:nth-child(2){
background-color: #66f;
}
.slider:nth-child(3){
background-color: #f66;
}
.slider:nth-child(4){
background-color: #ff3;
}
.more{
width: 0;
height: 0;
overflow: visible;
}
.operate{
}
.pre, .next{
position: absolute;
top: 80px;
font-size: 40px;
font-weight: 700;
color: #fff;
line-height: 40px;
cursor: pointer;
}
.pre{
left: 20px;
}
.next{
right: 20px
}
.breviary{
position: absolute;
width: 100%;
bottom: 0;
height: 30px;
margin: 0;
text-align: center;
}
.breviary > .item{
display: inline-block;
width: 50px;
height: 5px;
margin: 0 4px;
background-color: rgba(99, 99, 99, .3);
cursor: pointer;
}
.breviary > .item > .in{
width: 0;
height: 5px;
background-color: rgba(199, 199, 199, .7);
}
.breviary > .item > .current{
width: 100%;
transition: width 3s;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
</div>
<div class="more">
<div class="operate">
<div class="next">></div>
<div class="pre"><</div>
</div>
<ul class="breviary">
<li class="item">
<div class="in"></div>
</li>
<li class="item">
<div class="in"></div>
</li>
<li class="item">
<div class="in"></div>
</li>
<li class="item">
<div class="in"></div>
</li>
</ul>
</div>
</div>
<script>
// 暂定slider width为1366px。实际应用中取screen.availWidth || document.body.clientHeight， resize时记得做改变~
const WIDTH = 1366
let $con = document.getElementsByClassName('container')[0]
let $sliders = $con.getElementsByClassName('slider')
let curView = 0
let $pre = document.getElementsByClassName('pre')[0]
let $next = document.getElementsByClassName('next')[0]
let $breviary = document.getElementsByClassName('breviary')[0]
let $breviarys = $breviary.getElementsByClassName('item')
let $ins = $breviary.getElementsByClassName('in')
let timer = 0
var util = {
calcContainWidth: function() {
let len = $sliders.length
return len * WIDTH
},
viewChange: function() {
// 清除计时器
clearTimeout(timer)
let left = 0 - curView * WIDTH
$con.style.left = left + 'px'
// 为缩略图添加.current
let $target = $ins[curView]
let preClass = $target.className
let newClass = preClass + ' current'
let $current = $breviary.getElementsByClassName('current')[0]
if ($current) {
$current.setAttribute('class', 'in')
}
// 推迟到逻辑最后执行，否则会不显示动画
setTimeout(function() {
$target.setAttribute('class', newClass)
}, 0)
timer = setTimeout(() => {
this.nextView()
this.viewChange()
}, 3000)
},
nextView: function() {
if (curView === $sliders.length - 1) {
curView = 0
} else {
curView++
}
// 调用刷新函数
this.viewChange()
},
preView: function() {
if (curView === 0) {
curView = $sliders.length - 1
} else {
curView--
}
// 调用刷新函数
this.viewChange()
}
}
util.viewChange()
// 赋值container width
$con.style.width = util.calcContainWidth() + 'px'
// 赋值slider width
Array.from($sliders).forEach(item => {
item.style.width = WIDTH + 'px'
})
// 绑定上一步、下一步事件
$pre.addEventListener('click', function() {
util.preView()
})
$next.addEventListener('click', function() {
util.nextView()
})
// 绑定缩略图的点击事件
Array.from($breviarys).forEach((item, index) => {
item.addEventListener('click', function(){
console.log('click')
curView = index
util.viewChange()
})
})
</script>
</body>
</html>
网友评论