热搜:fiddler git ip ios 代理
历史搜索

纯js实现左右无限滚动广告(原创)

admin2024-02-01 09:30:01

利用纯js实现左右滑动、鼠标悬停暂停效果

css代码

<style>
#scroll-container {
width: 80%;
overflow: hidden;
margin: auto;
white-space: nowrap;
position: relative;
}

.scroll-content {
display: inline-block;
width: 100%;
}

/* 将广告项样式单独定义 */
.advert-item {
display: inline-block;
/* 或根据实际情况调整 */
}
</style>

html代码

<div id="scroll-container">
<!-- 广告内容 -->
<div id="scroll-content">
<!-- 实际广告项 -->
<div class="advert-item"><img
src="https://www.mimiwuqi.com/e/data/tmp/titlepic/f367b4dcbdc166b35d1922698038b1cf.png"></div>
<div class="advert-item"><img
src="https://www.mimiwuqi.com/e/data/tmp/titlepic/3b0ef68e909be8adc301cf8afd3aabeb.png" alt="css鼠标样式大全一览表">
</div>
<div class="advert-item"><img
src="https://www.mimiwuqi.com/e/data/tmp/titlepic/71ea0b93f98123c790bca9f071a018fd.png" alt="谷歌浏览器模拟百度ua蜘蛛访问">
</div>
<div class="advert-item"><img
src="https://www.mimiwuqi.com/e/data/tmp/titlepic/f367b4dcbdc166b35d1922698038b1cf.png"></div>
<div class="advert-item"><img
src="https://www.mimiwuqi.com/e/data/tmp/titlepic/3b0ef68e909be8adc301cf8afd3aabeb.png" alt="css鼠标样式大全一览表">
</div>
<div class="advert-item"><img
src="https://www.mimiwuqi.com/e/data/tmp/titlepic/71ea0b93f98123c790bca9f071a018fd.png" alt="谷歌浏览器模拟百度ua蜘蛛访问">
</div>
<div class="advert-item"><img
src="https://www.mimiwuqi.com/e/data/tmp/titlepic/f367b4dcbdc166b35d1922698038b1cf.png"></div>
<div class="advert-item"><img
src="https://www.mimiwuqi.com/e/data/tmp/titlepic/3b0ef68e909be8adc301cf8afd3aabeb.png" alt="css鼠标样式大全一览表">
</div>
<div class="advert-item"><img
src="https://www.mimiwuqi.com/e/data/tmp/titlepic/71ea0b93f98123c790bca9f071a018fd.png" alt="谷歌浏览器模拟百度ua蜘蛛访问">
</div>

<!-- ... 更多广告项 ... -->
</div>
</div>

js代码

<script>
document.addEventListener("DOMContentLoaded", function () {
var scrollContainer = document.getElementById('scroll-container');
var scrollContent = document.getElementById('scroll-content');
var scrollAmount = 0; // 已滚动的量
var scrollSpeed = 1; // 每帧滚动的像素数
var itemWidth = scrollContent.offsetWidth; // 单个广告的宽度
var isScrolling = true; // 是否继续滚动的标志

// 增加内容以确保有足够的缓冲进行平滑滚动
// 假设您已经有了一个完全相同,用于平滑循环滚动的复制的内容
scrollContent.innerHTML += scrollContent.innerHTML;

function step() {
if (isScrolling) {
// 更新滚动位置
scrollAmount += scrollSpeed;
if (scrollAmount >= scrollContent.scrollWidth / 2) {
// 重置滚动位置到最开始而非0
// 由于内容被复制过一份,所以是总宽度的一半
scrollAmount = 0;
}
scrollContainer.scrollLeft = scrollAmount;
}

// 继续动画
window.requestAnimationFrame(step);
}

// 启动动画
window.requestAnimationFrame(step);

// 鼠标悬停时停止滚动
function stopScrolling() {
isScrolling = false;
}

// 鼠标离开时恢复滚动
function startScrolling() {
isScrolling = true;
}

// 添加鼠标事件监听器
scrollContainer.addEventListener('mouseover', stopScrolling);
scrollContainer.addEventListener('mouseout', startScrolling);
});
</script>

最终效果图:

image.png