jQuery 编写滚动标语或者图片的代码

jQuery让JavaScript代码变得简单，这里将介绍如何用它来实现滚动的标语，新闻，或者图片，等等。

1. JavaScript:

/*jquery.js可以在jQuery.com下载，当然你也可以用我的这个*/
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
/* 滚动文字 应用Jquery 
** By Adam Cai
** http://www.61dh.com
*/
var a=0;
var b=1;
var t;
$(document).ready(function(){
	t= setInterval("roll(a,b);", 3000); //时间间隔为3秒
});
function roll (off,on){
	clearInterval(t);
	var $firstNode = $('#motto>p'); //#motto 是DIV的ID,'p'是该区间的段落          
	$firstNode.eq(off).fadeOut('slow',function(){  
		$firstNode.eq(on).fadeIn('slow');
	});
	if(on==($('#motto>p').length-1)){
		a=on; //on 指DIV里最后一个P
		b=0;
	}
	else if(off==($('#motto>p').length-1)){
                //当最后一个准备关闭，a, b 重新赋值
		a=0;   
		b=1;
	}
	else{
		a++;
		b++;
	}
	t = setInterval ("roll(a, b);", 3000);
}
	
</script>

HTML：

<div id="motto">
   <p style="display:block"> 
      <img src="http://www.61dh.com/images/61dh.png" border="0"/>
   </p>
   <p style="display:none">
      <img src="http://img.baidu.com/img/logo-zhidao.gif" border="0"/>
   </p>
   <p style="display:none">
      学的有趣，玩的开心
    </p> 	
</div>

运用：只要把要滚动的文字，新闻，或者图片，放在<p></p>之间就可以了。 第一个p的display设为‘block’，其它的设为‘none’。当页面装载完毕，上面的JavaScript脚本就会自动更改display的属性，实现滚动效果。

演示：jQuery滚动效果