一个简单实用的轮播器
WEB开发经常实用到一种情况,即某个容器内的各项轮流循环播放显示,同时有相应的导航条提示,因为这个在很多地方可以使用,而且功能很相似的,所以写一个这样的播放功能,共享一下,需要注意的是这个需要jQuery的支持, 这个自己网上搜索下载即可,下面总结出来如下,直接看代码,
一,把如下保存为一个独立的文件 itemPlayerApp.js :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>TEST</title><script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script language="javascript" type="text/javascript" src="itemPlayerApp.js"></script><style type="text/css">*{font-family:"宋体",verdana,arial; font-size:12px;color:#000000;}#playerBox{font-family:"宋体",verdana,arial; font-size:12px;color:#000000;}</style></head><body><div id="playerBox" class="columnLeft01 box02"><div id="playerBoxNavCon"> <a id="itemNav0" href="#">1</a> <a id="itemNav1" href="#">2</a><a id="itemNav2" href="#">3</a></div><div id="playerBoxItemCon"><a id="item0" href="#"><img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" width="100%" height="200" border="0"></a><a id="item1" href="#"><img src="http://csdnimg.cn/www/images/csdnindex_logo.gif" width="100%" height="200" border="0"></a><a id="item2" href="#"><img src="http://avatar.csdn.net/5/1/9/1_shenzhennba.jpg" width="100%" height="200" border="0"></a></div></div><p> </p><p>项目循环轮播功能</p><script language="javascript" type="text/javascript">window.onload=function(){itemPlayerApp.init('playerBox',3000,300,200);itemPlayerApp.appActive();}</script></body></html>提示: jQuery.js 的文件请网上自己下载,
在使用到的时候直接使用即可,^=^