（与jQuery靠近乎）04-事件实例*利用jQuery动画实现无缝滚动/广告条/轮播/播报效果

最新推荐文章于 2021-12-27 09:39:06 发布

原创最新推荐文章于 2021-12-27 09:39:06 发布 · 782 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #动画 #javascript #css3 #前端

jq学习专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何利用jQuery创建一个无缝滚动的广告条或轮播效果。通过展示三种不同的滚动样式，并提供详细的HTML和JavaScript代码示例，帮助读者理解并实现这一功能。在鼠标悬停时，滚动会暂停，离开时继续。感兴趣的读者可以尝试并将代码应用于自己的项目中，记得关注作者的优快云博客获取更多学习资源。

今天，我还是风尚，一个有梦想的咸鱼程序员

今天我们还来和jQuery来靠近乎

这次咱们整利用jQuery动画实现

无缝滚动/广告条/轮播/播报效果

效果图1：

效果图2：

效果图3：

相信你对此很感兴趣了吧：

1.准备好你的jQuery插件0.0

2.创建一个HTML

3.上代码

具体代码如下，对你有用的话记得一键三联啊，禁止白嫖！

代码有任何问题记得下方留言啊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.da {
			border: 10px solid sandybrown;
			text-align: center;
			width: 600px;
			height: 60px;
			text-align: center;
			overflow: hidden;
			box-shadow: 0 8px 8px rgba(10, 16, 20, .24), 0 0 8px rgba(10, 16, 20, .12);
			color: #FF0000;
			margin: 0 auto;
		}

		.box div {
			font-size: 50px;
			width: 600px;
			height: 60px;
			line-height: 60px;
		}
	</style>
	<body>
		<h1 style="width: 600px; margin: 0 auto;text-align: center;">无缝滚动店|欢迎您光临</h1>

		<div class="da">
			<div class="box">
				<div>♥无缝滚动店|欢迎您光临♥</div>
				<div>♥1号技师到1688房间♥</div>
				<div>♥2号技师到1688房间♥</div>
				<div>♥3号技师到1688房间♥</div>
				<div>♥4号技师到1688房间♥</div>
				<div>♥5号技师到1688房间♥</div>
				<div>♥6号技师到1688房间♥</div>
			</div>
		</div>
	</body>
	<script src="JS/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			function dh() {
				$(".box").animate({
					"margin-top": "-60"
				}, 1000, function() {
					var one = $(".box div").first();

					$(".box").append(one).css("margin-top", 0)

				});
			}

			var tim = setInterval(dh, 5000)

			$(".da").hover(function() {
					clearInterval(tim)
				}, function() {
					tim = setInterval(dh, 5000)
				}

			)

		})
	</script>
</html>