一个jquery+marquee插件实现的连续滚动代码
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>连续滚动走马灯(无缝衔接)</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jQuery.Marquee/1.6.0/jquery.marquee.min.js"></script>
<style>
.marquee-container {
width: 100%; /* 容器宽度自适应浏览器宽度 */
overflow: hidden; /* 隐藏溢出内容 */
white-space: nowrap; /* 防止换行 */
}
.p_list {
display: inline-block; /* 保证所有项目在一行内显示 */
}
.cbox-1 {
display: inline-block; /* 让每个友情链接项目在同一行 */
padding: 0 20px; /* 项目之间的间距 */
white-space: nowrap; /* 确保项目本身不换行 */
}
</style>
</head>
<body>
<div class="e_loop-1 s_list" needjs="true">
<div class="marquee-container">
<div class="p_list">
<div class="cbox-1 p_loopitem">
<div class="e_container-2 s_layout">
<div class="cbox-2-0 p_item">
<div class="e_richText-5 s_title clearfix">危机公关公司</div>
</div>
</div>
</div>
<div class="cbox-1 p_loopitem">
<div class="e_container-2 s_layout">
<div class="cbox-2-0 p_item">
<div class="e_richText-5 s_title clearfix">华为</div>
</div>
</div>
</div>
<div class="cbox-1 p_loopitem">
<div class="e_container-2 s_layout">
<div class="cbox-2-0 p_item">
<div class="e_richText-5 s_title clearfix">危机公关公司</div>
</div>
</div>
</div>
<div class="cbox-1 p_loopitem">
<div class="e_container-2 s_layout">
<div class="cbox-2-0 p_item">
<div class="e_richText-5 s_title clearfix">华为</div>
</div>
</div>
</div>
<div class="cbox-1 p_loopitem">
<div class="e_container-2 s_layout">
<div class="cbox-2-0 p_item">
<div class="e_richText-5 s_title clearfix">危机公关公司</div>
</div>
</div>
</div>
<div class="cbox-1 p_loopitem">
<div class="e_container-2 s_layout">
<div class="cbox-2-0 p_item">
<div class="e_richText-5 s_title clearfix">华为</div>
</div>
</div>
</div>
<div class="cbox-1 p_loopitem">
<div class="e_container-2 s_layout">
<div class="cbox-2-0 p_item">
<div class="e_richText-5 s_title clearfix">危机公关公司</div>
</div>
</div>
</div>
<div class="cbox-1 p_loopitem">
<div class="e_container-2 s_layout">
<div class="cbox-2-0 p_item">
<div class="e_richText-5 s_title clearfix">华为</div>
</div>
</div>
</div>
<div class="cbox-1 p_loopitem">
<div class="e_container-2 s_layout">
<div class="cbox-2-0 p_item">
<div class="e_richText-5 s_title clearfix">危机公关公司</div>
</div>
</div>
</div>
<div class="cbox-1 p_loopitem">
<div class="e_container-2 s_layout">
<div class="cbox-2-0 p_item">
<div class="e_richText-5 s_title clearfix">华为</div>
</div>
</div>
</div>
<!-- 其他的友情链接项目 -->
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.marquee-container .p_list').marquee({
duration: 90000, // 滚动总时间（毫秒）
gap: 0, // 两次滚动间的间隔
delayBeforeStart: 0, // 滚动开始前的延迟时间
direction: 'left', // 滚动方向
duplicated: true, // 无缝滚动
startVisible: true, // 从左侧可见区域开始滚动
pauseOnHover: true // 鼠标悬停时暂停
});
});
</script>
</body>
</html>