发表于： 2019-12-20 22:46:27
1 1006
一、今天完成的事情
手写轮播图怎么写
学习了用css纯手写轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>carousel</title>
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- fontawesome字体库 -->
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.container {
width: 75vw;
margin: 0 auto;
vertical-align: middle;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
}
.fa {
font-size: 10vh;
display: none;
}
.container:hover .fa {
display: inline-block;
}
.image-container {
position: relative;
left: 0%;
/* 三张图片为300% */
width: 300%;
height: 100%;
display: flex;
/* 动画效果 */
transition: left 0.4s ease-in-out;
}
.image-container > img {
/* 三张图片除以3 */
width: calc(100% / 3);
}
/* 定义滚动条宽高 */
::-webkit-scrollbar {
width: 0;
height: 0;
}
.btn-left {
position: absolute;
top: 35vh;
left: 0.5vw;
color: #fff;
}
.btn-right {
position: absolute;
top: 35vh;
right: 0.5vw;
color: #fff;
}
.spot {
padding: 1% 0;
display: flex;
text-align: center;
height: 30px;
background-color: #fbfbfb;
color: #848484;
}
.btn {
flex: 1;
}
/* 选中后的字体颜色 */
.on {
color: #e61673;
}
.on:after {
content: '';
height: 5px;
margin: 0 auto;
width: 20%;
position: relative;
bottom: -50%;
background-color: #e61673;
display: block;
}
</style>
</head>
<body>
<div>
<div>
<img src="./image/image1.png" ondragstart="return false;">
<img src="./image/image1.png" ondragstart="return false;">
<img src="./image/image1.png" ondragstart="return false;">
</div>
<div onClick='left()'><i class="fa fa-angle-left"></i></div>
<div onClick='right()'><i class="fa fa-angle-right"></i></div>
<div>
<div class="btn on">第1张</div>
<div>第2张</div>
<div>第3张</div>
</div>
</div>
<script>
setTimeout(right(), 2000);
// 加载按钮id
let btnList = document.getElementsByClassName('btn');
for (let i = 0; i < btnList.length; i++) {
btnList[i].onclick = function () {
_switch(this);
};
btnList[i].id = ('id', 'btnId_' + i);
}
// 保存左边距离
let leftDistance = 0;
// 保存当前图片索引
let currentIndex = 0;
// 所有下侧按钮数量
let btnNum = $('.btn').length;
// 根据按钮下标切换图片
function _switch(that) {
for (let i = 0; i < btnList.length; i++) {
if (that.id == 'btnId_' + i) {
$(that).addClass('on');
$('.image-container').css('left', -i * 100 + '%');
currentIndex = i;
leftDistance = -i * 100;
// 如下为一个图片配置一次
// if (i == 0) { // 第一张图片
// $('.image-container').css('left','0');
// leftDistance = 0;
// }
// if (i == 1) { // 第二张图片
// $('.image-container').css('left','-100%');
// leftDistance = -100;
// }
// if (i == 2) { // 第三张图片
// $('.image-container').css('left','-200%');
// leftDistance = -200;
// }
// currentIndex = i;
} else if (that.id != 'btnId_' + i) {
$('#btnId_' + i).removeClass('on');
}
}
}
function left() {
if (leftDistance == 0) {
// 三张图片 -200%
$('.image-container').css('left', '-200%');
leftDistance = -200;
currentIndex = btnNum - 1;
} else {
currentIndex--;
leftDistance += 100;
$('.image-container').css('left', leftDistance + '%');
}
for (let i = 0; i < btnNum; i++) {
if (i == currentIndex) {
$('#btnId_' + i).addClass('on');
} else {
$('#btnId_' + i).removeClass('on');
}
}
}
let interval;
function right() {
clearInterval(interval);
// -200 三张图片
if (leftDistance == -200) {
leftDistance = 0;
currentIndex = 0;
$('.image-container').css('left', '0%');
} else {
currentIndex++
leftDistance -= 100;
$('.image-container').css('left', leftDistance + '%');
}
if (currentIndex >= btnNum) {
currentIndex = 0;
}
for (let i = 0; i < btnNum; i++) {
if (i == currentIndex) {
$('#btnId_' + i).addClass('on');
} else {
$('#btnId_' + i).removeClass('on');
}
}
interval = setInterval('right()', 2000);
}
</script>
</body>
</html>
二、遇到的困难
手写轮播图的实际应用
三、明天要做的事情
把任务十二做完，开始自己手写组件库
四、收获
学习了怎么手写轮播图
返回列表
评论