HTML5+CSS3+JavaScript实现位移轮播图
演示
甲
乙
丙
丁
《
》
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
border: 0;
box-sizing: border-box;
padding: 0;
}
.wp {
width: 1600px;
height: 400px;
overflow: hidden;
}
.box {
width: 400px;
height: 400px;
text-align: center;
line-height: 400px;
font-size: 4em;
float: left;
}
.box1 {
background: skyblue;
}
.box2 {
background: yellow;
}
.box3 {
background: orangered;
}
.box4 {
background: brown;
}
.btm {
overflow: hidden;
}
.btm div {
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
float: left;
}
.btm1 {
background: skyblue;
}
.btm2 {
background: yellow;
}
.btm3 {
background: orangered;
}
.btm4 {
background: brown;
}
.next_div {
position: absolute;
width: 50px;
height: 50px;
background-color: transparent;
color: black;
top: 175px;
margin-left: 350px;
text-align: center;
line-height: 50px;
font-size: 35px;
}
.last_div {
position: absolute;
width: 50px;
height: 50px;
background-color: transparent;
color: black;
top: 175px;
text-align: center;
line-height: 50px;
font-size: 35px;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; overflow: hidden">
<div class="wp" id="wp">
<div class="box box1">甲</div>
<div class="box box2">乙</div>
<div class="box box3">丙</div>
<div class="box box4">丁</div>
</div>
</div>
<div class="btm">
<div class="btm1 btm" id="btm1">甲</div>
<div class="btm2 btm" id="btm2">乙</div>
<div class="btm3 btm" id="btm3">丙</div>
<div class="btm4 btm" id="btm4">丁</div>
</div>
<div class="last_div" id="last_div">《</div>
<div class="next_div" id="next_div">》</div>
</body>
<script>
//四个div拼起来的盒子
var _all_box = document.getElementById("wp");
//四个大正方形
var _box = _all_box.getElementsByTagName("div");
//四个按钮
var _btm = document.getElementsByClassName("btm");
//当前位置索引
var index = 1;
//线程锁(防止定时器卡时间，比如一次性跳两页)
var lock = false;
for (let i = 1; i < _btm.length; i++) {
_btm[i].onclick = function () {
//取当前位置
var start = _all_box.style.marginLeft;
//如果没有设置过marginLeft，那就会返回空，判断为空则左边距是0px
if (start == "") start = 0 + "px";
//转数字
var pos = parseInt(start);
//终点位置
var zhong = -400 * (i - 1);
//定时器做动画
var flash = setInterval(qiehuan, 5);
//启用线程锁
lock = true;
//定时器执行的函数
function qiehuan() {
//如果位置相等，清定时器
if (pos == zhong) {
window.clearInterval(flash);
} else {
//大减小加
if (pos > zhong) {
pos -= 25;
}
if (pos < zhong) {
pos += 25;
}
//改变数值
_all_box.style.marginLeft = pos + "px";
}
}
//设置当前索引
index = i;
};
}
//下一页，触发下一控件onclick事件
function next() {
//如果等于最后一个div，则返回第一个-1
if (index == 4) {
index = 0;
}
index++;
//触发onclick函数
_btm[index].onclick();
}
//上一页，触发上一控件onclick事件
function last() {
//如果等于第一个div，则返回最后一个+1
if (index == 1) {
index = 5;
}
index--;
//触发onclick函数
_btm[index].onclick();
}
//添加上一页点击事件
document.getElementById("last_div").onclick = function () {
lock = true;
last();
};
//添加下一页点击事件
document.getElementById("next_div").onclick = function () {
lock = true;
next();
};
//轮播定时器,3秒循环
setInterval(() => {
//如果线程锁启用，则跳过下一页函数，置线程锁为关闭。否则执行下一页函数
if (!lock) {
next();
}
lock = false;
}, 3000);
</script>
</html>
评论 (0)