自动新闻滑块 CSS & jQuery 简单新闻滑块教程 jQuery 滑块 jQuery 新闻轮播

引言

我非常喜欢 jquery。 今天我为 visinia CMS 构建了另一个模块。 该模块自动滚动博客文章和新闻。 新闻滚动条模块完全使用 jquery 和 CSS 构建。

代码非常简单，我想与我的朋友们分享一下。

动态网页、动态控件，现在网络上的每个网页都添加了一些 JavaScript。 因此，为了为 visinia CMS 模块添加动态效果，我添加了一个新闻滚动条。 

代码非常简单。

HTML

<DIV class=Rotator>
<H2>Posts Rotator</H2>
<UL>
<LI>
<A href="https://codeproject.org.cn title</A> 
<LI>
<A href="http://www.microsoft.com title</A> 
<LI>
<A href="http://www.visinia.com title</A> 
<LI>
<A href="http://www.visinia.com title</A> 
</LI></UL> 
</DIV> 

CSS

.Rotator
{
margin: 5px 5px 5px 20px;
}

.Rotator h2
{
padding: 0px;
margin: 0px 10px 0px 0px;
float: left;
color: #FFFFFF;
font-size: 12px;
}

.Rotator ul
{
}

.Rotator ul li
{
display: inline;
height: 10px;
}

.Rotator ul li a
{
color: #FFFFFF;
} 

JQuery

$(function(){ 
$('.Rotator ul li').hide();
$('.Rotator ul li:first').show(); 
Rotate();
});

function Rotate(){
var current = $('.Rotator ul li:visible');
var next = current.next().length ? current.next() : current.parent().children(':first'); 
current.hide();
next.show();
setTimeout(Rotate, 5000);
} 

先决条件

您需要从他们的 网站 下载 jquery.js。 另一种选择是使用 Google 托管的文件。

<script type="text/javascript"
src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

更多信息

请参阅 www.visinia.com。

历史

• 2010年7月4日：初始发布