js实现图片轮换功能

上图的图片轮换功能用js实现

html

<div class="pic">
	<ul>	
		<li style="display: list-item;" nid="208">
			<a href="http://yhxz.ata.net.cn/?r=dajie" target="_blank">
				<img width="670" height="240" alt="做未来的银行白领，你准备好了吗？" src="/upload/2012-08-17/13451855142122426623.jpg">
			</a>
		</li>
		<li style="display: none;" nid="196">
			<a href="http://www.ccbp.net.cn/campus2012" target="_blank">
				<img width="670" height="240" alt="2012’银行校园招聘，你准备好了吗？" src="/upload/2012-08-16/13450808631165435006.jpg">
			</a>
		</li>
		<li style="display: none;" nid="163">
			<a href="http://www.ccbp.org.cn/apply/?f=ccbp" target="_blank">
				<img width="670" height="240" alt="2012年银行从业资格考试报名" src="/upload/2012-07-24/13431453841975092810.jpg">
			</a>
		</li>			
	</ul>
</div>

js

$(function(){
	var cur_adbar = 1;

	$('div.slider').find('span[nid]').click(function(){
		$('div.slider').find('li[nid]').hide();	//隐藏全部的li
		$('div.slider').find('li[nid="'+$(this).attr('nid')+'"]').fadeIn('slow');		//缓慢的显示现在的li fadeIn()			$('div.slider').find('span[nid]').removeClass('cur');	//移除全部span的cur样式
		$(this).addClass('cur');	//添加当前span的cur样式
	});
	$('div.slider').find('span[nid]').first().click();
	
	setInterval(function(){$('div.slider').find('span[nid]').eq(cur_adbar++%3).click();},5000);
});

知识点 setInterval()函数

按照指定的周期来调用函数或者表达式

setInterval(function(){}, 5000);

 

首选执行的是：

$('div.slider').find('span[nid]').first().click();

第一张图片

调用$('div.slider').find('span[nid]').click()方法

setInterval(funtion(){$('div.slider').find('span[nid]').eq(cur_adbar++%3).click();}, 5000);

第二张图片