前端学习第68天轮播图
一.轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style >
* {
/*不允许选择文本, 网页文本不能负责*/
user-select: none;
}
body, ul {
margin: 0;
padding: 0;
list-style: none;
}
.scroll {
width: 1226px;
height: 460px;
margin: 0 auto;
background-color: orange;
position: relative;
cursor: pointer;
}
.scroll_view {
width: 100%;
height: 100%;
position: relative;
}
.scroll_view li {
background: red;
width: 100%;
height: 100%;
font: normal 100px/460px 'STSong';
text-align: center;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.scroll_view li.active {
opacity: 1;
transition: .5s;
}
.left {
position: absolute;
top: 170px;
left: 0;
background-color: #eee;
font-size: 100px;
}
.left:hover, .right:hover {
cursor: pointer;
background-color: #333;
}
.right {
position: absolute;
top: 170px;
right: 0;
background-color: #eee;
font-size: 100px;
}
.scroll_tag {
position: absolute;
right: 10px;
bottom: 10px;
}
.scroll_tag li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
border: 3px solid #ddd;
float: left;
margin: 0 10px;
}
.scroll_tag li.active {
background-color: #ccc;
border: 3px solid #333;
}
</style>
</head>
<body>
<div class="scroll">
<ul class="scroll_view">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="scroll_toggle">
<li class="left"><</li>
<li class="right">></li>
</ul>
<ul class="scroll_tag">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
(function () {
let left_btn = document.querySelector('.left');
let right_btn = document.querySelector('.right');
let img_lis = document.querySelectorAll('.scroll_view li');
let tag_lis = document.querySelectorAll('.scroll_tag li');
let scroll = document.querySelector('.scroll');
// 定时器
let timer = 0;
// 记录活跃状态的索引变量
let active_index = 0;
// 下一张
right_btn.onclick = function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 索引切换(更新活跃索引)
// 安全性: 最后一张的下一张应该是第一张
if (active_index == 4) active_index = -1;
active_index++;
// 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
};
// 上一张
left_btn.onclick = function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 索引切换(更新活跃索引)
// 安全性: 第一张的前一张应该是最后一张
if (active_index == 0) active_index = 5;
active_index--;
// 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
};
// 自动轮播
function autoScroll() {
timer = setInterval(function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 索引切换(更新活跃索引)
// 安全性: 最后一张的下一张应该是第一张
if (active_index == 4) active_index = -1;
active_index++;
// 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
}, 1500);
}
// 加载页面就只执行一次,打开自动轮播
autoScroll();
// 鼠标悬浮轮播图停止自动轮播
scroll.onmouseenter = function () {
clearInterval(timer)
};
// 鼠标移开重新开启自动轮播
scroll.onmouseleave = function () {
autoScroll();
};
// tag点击对应的图片切换
for (let i = 0; i < tag_lis.length; i++) {
tag_lis[i].onclick = function () {
// console.log(i);
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 更新活跃索引
active_index = i;
// 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
}
}
})()
</script>
</html>
二.滚动轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动轮播</title>
<style>
body, ul {
margin: 0;
padding: 0;
list-style: none;
user-select: none;
}
.wrapper {
width: 400px;
height: 240px;
background-color: orange;
margin: 50px auto;
position: relative;
overflow: hidden;
}
/* 滚得的标签是ul, 带动着4个li同步运动 */
.scroll_view {
width: 1600px;
/*利用绝对定位完成运动*/
position: absolute;
top: 0;
/*left: -400px;*/
left: 0;
/*transition: 1s;*/
}
.scroll_view li {
width: 400px;
height: 240px;
font: normal 80px/240px 'STSong';
text-align: center;
float: left;
}
.li1 { background-color: pink }
.li2 { background-color: deeppink }
.li3 { background-color: lightpink }
.li4 { background-color: hotpink}
.left {
position: absolute;
top: 100px;
left: 0;
background-color: #eee;
font-size: 30px;
}
.left:hover, .right:hover {
cursor: pointer;
background-color: #333;
}
.right {
position: absolute;
top: 100px;
right: 0;
background-color: #eee;
font-size: 30px;
}
.scroll_tag {
position: absolute;
right: 10px;
bottom: 10px;
}
.scroll_tag li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
border: 3px solid #ddd;
float: left;
margin: 0 10px;
}
.scroll_tag li.active {
background-color: #ccc;
border: 3px solid #333;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="scroll_view">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
<li class="li4">4</li>
</ul>
<ul class="scroll_toggle">
<li class="left"><</li>
<li class="right">></li>
</ul>
<ul class="scroll_tag">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
(function () {
let scroll_view = document.querySelector('.scroll_view');
let left_btn = document.querySelector('.left');
let right_btn = document.querySelector('.right');
let tag_lis = document.querySelectorAll('.scroll_tag li');
right_btn.onclick = function () {
let total_lenth = 400;
let count = 0;
let step = 8;
let timer = setInterval(function () {
// 通过滚动的距离映射出所在的图片索引
let index = parseInt(-scroll_view.offsetLeft / total_lenth);
index += 1;
console.log(index);
// 临界点, 往右4
if (index == 4) {
clearInterval(timer);
return;
}
// 0+1 ==> 1
// 1+1 ==> 2
// 2+1 ==> 3
tag_lis[index - 1].className = "";
tag_lis[index].className = "active";
scroll_view.style.left = scroll_view.offsetLeft - step + 'px';
count++;
if (count >= total_lenth / step) {
clearInterval(timer)
}
}, 10);
};
left_btn.onclick = function () {
let total_lenth = 400;
let count = 0;
let step = 8;
let timer = setInterval(function () {
// 要偏移坐标系, 要加上一个宽度400 total_lenth
// 要处理第一次偏移bug, 少加上8 step
let index = parseInt((-scroll_view.offsetLeft + 392) / total_lenth);
console.log(index);
// 处理第一次偏移bug
// 3 => 2
// 2 => 1
// 1 => 0
// 临界点, 往左0
if (index == 0) {
clearInterval(timer);
return;
}
// if (index == 4) index = 3;
tag_lis[index].className = "";
tag_lis[index - 1].className = "active";
scroll_view.style.left = scroll_view.offsetLeft + step + 'px';
count++;
if (count >= total_lenth / step) {
clearInterval(timer)
}
}, 10);
}
})()
</script>
</html>
浙公网安备 33010602011771号