WEB开发经常实用到一种情况,即某个容器内的各项轮流循环播放显示,同时有相应的导航条提示,因为这个在很多地方可以使用,而且功能很相似的,所以写一个这样的播放功能,共享一下,需要注意的是这个需要jQuery的支持,这个自己网上搜索下载即可,下面总结出来如下,直接看代码,
一、把如下保存为一个独立的文件 itemPlayerApp.js
:=this.appMaxNum){i=0;}
this.appTab(i);
this.playData=(++i)+"xplay";
}
},appTab:function(tabIndex){
var k,j;
try{k=parseInt(tabIndex);}catch(e){k=0;}
for(j=0;j$('#' + cid).css({"position":"relative",'width':w,'height':h,'overflow':'hidden'});
$('#' + cid + "NavCon").css({'color':'#333333','height':'26px','position':'absolute','width':'95%','left':'0','bottom':'3px','text-align':'right','display':'block'});
var t = 0;
if(intervalTime == 'undefined' || intervalTime == null){
t = 3000;
}else{
try{ t = parseInt(intervalTime);}catch(e){ t = 3000;}
}
this.speed = t;
var navList = "#" + cid + "NavCon a";
this.appMaxNum = $(navList).size();
if(0 == this.appMaxNum){ return; }
var _this = this;
$(navList).each(function(i){
$(this).css({'padding':'2px 5px','margin-right':'2px','background-color':'#CCCCCC'});
if(i == 0){
$(this).css({'background-color':'#333333','color':'#FFFFFF'});
}
$(this).mouSEOver(function(){
_this.playData=i+'xstop';
_this.appTab(i);
});
$(this).mouSEOut(function(){
_this.playData=i+'xplay';
_this.appTab(i);
});
});
}
};
$('#' + cid + "NavCon").css({'color':'#333333','height':'26px','position':'absolute','width':'95%','left':'0','bottom':'3px','text-align':'right','display':'block'});
var t = 0;
if(intervalTime == 'undefined' || intervalTime == null){
t = 3000;
}else{
try{ t = parseInt(intervalTime);}catch(e){ t = 3000;}
}
this.speed = t;
var navList = "#" + cid + "NavCon a";
this.appMaxNum = $(navList).size();
if(0 == this.appMaxNum){ return; }
var _this = this;
$(navList).each(function(i){
$(this).css({'padding':'2px 5px','margin-right':'2px','background-color':'#CCCCCC'});
if(i == 0){
$(this).css({'background-color':'#333333','color':'#FFFFFF'});
}
$(this).mouSEOver(function(){
_this.playData=i+'xstop';
_this.appTab(i);
});
$(this).mouSEOut(function(){
_this.playData=i+'xplay';
_this.appTab(i);
});
});
}
};
二、如何使用:
1.需要使用的web页面中引入jQery文件和本 itemPlayerApp.js 文件,例如:
2.建立如下格式的HTML文件
<div id="containerIDNavCon">
<a id="itemNav0" class="item1" href="#">1
<a id="itemNav1" class="item1" href="#">2
<a id="itemNav2" class="item1" href="#">3
<a id="itemNav0" class="item1" href="#">1
<a id="itemNav1" class="item1" href="#">2
<a id="itemNav2" class="item1" href="#">3