基于jquery的滚动新闻列表

最新推荐文章于 2023-03-28 11:22:56 发布

꧁༺摩༒西༻꧂

最新推荐文章于 2023-03-28 11:22:56 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

博主原创，微信号：steve_frank。

本文链接：https://blog.youkuaiyun.com/steve_frank/article/details/8463627

前端专栏收录该内容

10 篇文章

订阅专栏

本文展示了使用vTicker插件实现新闻标题轮播效果的HTML和JavaScript代码示例。通过设置不同的速度、暂停时间和显示项目数量等参数，可以调整轮播的速度和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vTicker</title>
<style type="text/css" media="all">
body,html {
padding: 0;
margin: 0;
}

body {
background: #cccccc;
}

#news - container {
width: 400px;
margin: auto; margin - top : 10px;
border: 5px solid #333333;
}

#news - container ul li div {
border: 1px solid #aaaaaa;
background: #ffffff;
}
</style>
<script type="text/javascript" src="demo_files/jquery.js">
</script>
<script type="text/javascript" src="demo_files/jquery.vticker-min.js">
</script>
<script type="text/javascript">
$(function() {
$('#news-container').vTicker({
speed: 500,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 3
});
$('#news-container1').vTicker({
speed: 700,
pause: 4000,
animation: 'fade',
mousePause: false,
showItems: 1
});
});
</script>
</head>

<body>
<div id="news-container1">
<ul>
<li>
新闻标题1
</li>
<li>
新闻标题2
</li>
<li>
新闻标题3
</li>
<li>
新闻标题4
</li>
<li>
新闻标题5
</li>
</ul>
</div>
<div style="overflow: hidden; position: relative; height: 24px;"
id="news-container">
<ul style="position: absolute; margin: 0pt; padding: 0pt; top: 0px;">
<li
style="margin: 0pt; padding: 0pt; height: 18px; display: list-item;">
<div>
4) 摩洛哥塞拉，艺术家在一场为流浪儿童募捐的马戏节目中表演
</div>
</li>
<li
style="margin: 0pt; padding: 0pt; height: 18px; display: list-item;">
<div>
1) 印度克什知自己的孩子在骚乱中丧生时痛不欲生
</div>
</li>
<li
style="margin: 0pt; padding: 0pt; height: 18px display: list-item;">
<div>
2) 昆明警方近日捣毁了寻甸县的“洪兴帮”黑恶势力团伙
</div>
</li>
<li style="margin: 0pt; padding: 0pt; height: 18px">
<div>
3) 湖北武汉汉口龙王庙景区观景平台上，市民聚集在江边观看两江洪峰过汉
</div>
</li>
</ul>
</div>
</body>
</html>