HTML5+CSS3+JavaScript实现大图滚动轮播功能
预览
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>大图滚动</title>
</head>
<style>
* {
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
overflow: hidden;
width: 1300px;
height: 400px;
}
.lunbo {
float: left;
width: 2600px;
height: 400px;
}
.lunbo > img {
float: left;
width: 260px;
height: 400px;
}
</style>
<body>
<div class="box">
<div class="lunbo" id="lunbo">
<img
src="http://pic0.iqiyipic.com/image/20220412/53/6e/v_166855639_m_601_m3_260_360.jpg?caplist=jpg,webp,avif,%20//pic0.iqiyipic.com/image/20220412/53/6e/v_166855639_m_601_m3_260_360.jpg?caplist=jpg,webp,avif%202x"
/>
<img
src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200au8kyla1649663936904/350"
/>
<img
src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200upu5qi11648787330562/350"
/>
<img
src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200awcmu741648630288660/350"
/>
<img
src="http://puui.qpic.cn/vcover_vt_pic/0/dt9oaxh094144711649149461225/350"
/>
<img
src="http://pic0.iqiyipic.com/image/20220412/53/6e/v_166855639_m_601_m3_260_360.jpg?caplist=jpg,webp,avif,%20//pic0.iqiyipic.com/image/20220412/53/6e/v_166855639_m_601_m3_260_360.jpg?caplist=jpg,webp,avif%202x"
/>
<img
src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200au8kyla1649663936904/350"
/>
<img
src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200upu5qi11648787330562/350"
/>
<img
src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200awcmu741648630288660/350"
/>
<img
src="http://puui.qpic.cn/vcover_vt_pic/0/dt9oaxh094144711649149461225/350"
/>
</div>
</div>
<input style="width:100px;height:50px;margin-top: 50px;margin-left: 625px" type="button" onclick="fangxiang()" value="点我改变方向">
</body>
<script>
// 定时器锁
var time_lock = true;
// 鼠标锁
var mouse_lock = true;
// 轮播对象
var lunbo = document.getElementById("lunbo");
// 速度，正数向右滚动，负数向左滚动
var speed = -1;
function fangxiang(){
speed *= -1;
}
// 初始赋值
if (speed < 0) {
lunbo.style.marginLeft = "0px";
} else {
lunbo.style.marginLeft = "-1300px";
}
//定时器
var timer = setInterval(() => {
if (time_lock && mouse_lock) {
// 取当前位移量
var l = parseInt(lunbo.style.marginLeft);
// 每到一张完整的图片就停一秒
if (l % 260 == 0) {
time_lock = false;
setTimeout(() => {
time_lock = true;
}, 1000);
}
// 使图片循环
if (l > 0 || l < -1300) {
if (speed < 0) {
lunbo.style.marginLeft = "0px";
} else {
lunbo.style.marginLeft = "-1300px";
}
return;
}
lunbo.style.marginLeft = l + speed + "px";
}
}, 1);
// 鼠标进入轮播图则停止滚动
lunbo.onmouseover = function () {
mouse_lock = false;
};
// 鼠标退出轮播图则继续滚动
lunbo.onmouseout = function () {
mouse_lock = true;
};
</script>
</html>
评论 (0)