本文介绍了一个使用HTML、CSS和JavaScript实现的自定义走马灯效果。通过动态创建和填充图片数据,实现了无缝滚动的视觉体验。当鼠标悬停时停止滚动,离开时继续,提供了友好的交互。代码中详细展示了如何设置样式、布局以及JavaScript事件监听和动画处理,是前端开发中动态效果实现的一个实例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义走马灯</title>
<style>
#swipper {
height: 360px;
margin: 100px auto;
overflow: hidden;
}
#swipper ul {
height: 100%;
padding: 0;
margin: 0;
position: relative;
display: flex;
}
#swipper li {
list-style: none;
width: 600px;
height: 100%;
flex-shrink: 0;
position: relative;
transition: all 0.6s;
box-sizing: border-box;
z-index: 0;
}
#swipper li:hover {
z-index: 1;
transform: scale(1.2);
}
#swipper img {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="swipper">
<!-- type1 js插入节点 -->
<ul></ul>
<!-- type2 固定节点 -->
<!-- <ul>
<li>
<img src="http://n.sinaimg.cn/photo/transform/700/w1000h500/20211002/658c-a8f83bea938d25b7c776d54bdfda3655.jpg" alt="">
</li>
<li>
<img src="http://n.sinaimg.cn/public_column/700/w1000h500/20211221/8666-7568268466f4f4cb06b4d6cf393e22b2.jpg" alt="">
</li>
<li>
<img src="http://n.sinaimg.cn/news/transform/700/w1000h500/20210316/51c0-kmkptxe0299440.jpg" alt="">
</li>
<li>
<img src="http://n.sinaimg.cn/photo/transform/700/w1000h500/20201106/1ad8-kcpxnwv8925892.png" alt="">
</li>
</ul> -->
</div>
</body>
<script>
// js填充数据
let ulNode = document.querySelector('ul');
let imgArr = [{
id: 1,
src: "http://n.sinaimg.cn/photo/transform/700/w1000h500/20211002/658c-a8f83bea938d25b7c776d54bdfda3655.jpg",
}, {
id: 2,
src: "http://n.sinaimg.cn/public_column/700/w1000h500/20211221/8666-7568268466f4f4cb06b4d6cf393e22b2.jpg",
}, {
id: 3,
src: "http://n.sinaimg.cn/news/transform/700/w1000h500/20210316/51c0-kmkptxe0299440.jpg",
}, {
id: 4,
src: "http://n.sinaimg.cn/photo/transform/700/w1000h500/20201106/1ad8-kcpxnwv8925892.png",
}, ]
let li = '';
for (let x of imgArr) {
li += `<li> <img src="${x.src}" key="${x.id}" /> </li>`
}
ulNode.innerHTML = li;
// 走马灯实现效果
var oContainer = document.querySelector("#swipper");
var oWrapper = document.querySelector("ul");
var oSlide = document.querySelectorAll("li");
// 计算总宽度
var wrapperW = oSlide[0].offsetWidth * oSlide.length;
// 复制一遍li总长度,实现无缝连接
oWrapper.style.width = wrapperW * 2 + "px";
oWrapper.innerHTML += oWrapper.innerHTML;
if (wrapperW < oContainer.offsetWidth) {
oContainer.style.width = wrapperW + "px";
}
var i = 0,
timer = null;
var sliderMove = function() {
timer = setInterval(function() {
i++;
if (i > wrapperW) {
i = 0;
}
oWrapper.style.transform = 'translate(' + (-i) + 'px)';
}, 10)
}
sliderMove();
oContainer.addEventListener("mouseover", function() {
clearInterval(timer);
})
oContainer.addEventListener("mouseout", function() {
sliderMove(timer);
})
</script>
</html>