好嘞！废话不多说！Code贴上！哪位高手有更好的方式可以多多指点！
CSS Code
[url=#]<a href="#">测试二</a>
<a href="#">测试三</a>
<a href="#">测试四</a>
<a href="#">测试五</a>
</div>
<div id="playerNav"></div>
</div>
</div>
JS Code
/*
* images player
* author:mr·zhong
* date:2010-04-19
*/
//当前导航页码数字
var currentPage = 1;
//图片间隔时间
var playerTime = 3000;
jquery(function(){
SetPlayerNavPosition();
OnLoadingImages();
OnLoadingLinks();
setInterval("Player()",playerTime);
});
/*
* 图片播放方法
*/
function Player(){
PageClick(jquery("#page_" + currentPage));
if(currentPage == jquery("#playerNav a").length)
currentPage = 1;
else
currentPage++;
}
/*
* 创建图片页码·并绑定页码的click事件
* count:需要创建页面的个数
*/
function CreatePageNberObj(count){
var pages = '';
for(var i = 1; i <= (count - 1); i++){
pages += '<a id="page_' + i + '" idx="' + i + '" onfocus="blur()">' + i + '</a>';
}
jquery("#playerNav").html(pages);
for(var i = 1; i <= count; i++){
BindPageClick("page_" + i);
}
}
/*
* 加载图片集·并为图片设定唯一ID，最后显示一张隐藏其它
*/
function OnLoadingImages(){
var li_id = 1;
jquery("#playerImage li").each(function(){
jquery(this).attr("id","play_img_" + li_id);
if(li_id > 1){
SetImageShowOrHide(jquery(this),false);
}
li_id++;
});
}
/*
* 加载图片相对应链接集·并为链接设定唯一ID，最后显示对相应的链接隐藏其它
*/
function OnLoadingLinks(){
var a_id = 1;
jquery("#playerTitle a").each(function(){
jquery(this).attr("id","link_" + a_id);
if(a_id > 1){
SetImageShowOrHide(jquery(this),false);
}
a_id++;
});
CreatePageNberObj(a_id);
}
/*
* 绑定图片页码的click事件底层方法
*/
function BindPageClick(id){
jquery("#" + id).click(function(){
PageClick(jquery(this));
});
}
/*
* 图片页码Click处理方法
* obj:当前页码元素对象
*/
function PageClick(obj){
var id = obj.attr("idx");
//当页码在自动播放的时候点击了某个页码数字必须再重新赋值给当前的currentPage记录器
currentPage = id;
//设置所有页码样式为默认
jquery("#playerNav a").removeClass("hover");
//设置当前选中的页码数字为指定的颜色
SetPageColor(obj,true);
//显示或隐藏图片
jquery("#playerImage li").each(function(){
if(jquery(this).attr("id") == ("play_img_" + id)){
SetImageShowOrHide(jquery(this),true);
}else{
SetImageShowOrHide(jquery(this),false);
}
});
//显示或隐藏文字链
jquery("#playerTitle a").each(function(){
if(jquery(this).attr("id") == ("link_" + id)){
SetImageShowOrHide(jquery(this),true);
}else{
SetImageShowOrHide(jquery(this),false);
}
});
}
/*
* 设置指定的元素或图片显示或不隐藏
* obj:需要隐藏的元素
* isShow:显示or隐藏
*/
function SetImageShowOrHide(obj,isShow){
if(!isShow){
obj.fadeOut(1000);
}else{
obj.fadeIn(2000);
}
}
/*
* 设置指定的图片页码样式
* obj:需要设置的元素
* isSelect:是否选中
*/
function SetPageColor(obj,isSelect){
if(!isSelect){
obj.removeClass("hover");
}else{
obj.addClass("hover");
}
}
/*
* 设置图片数字链接和图片标题DIV位置
*/
function SetPlayerNavPosition(){
var offset = jquery("#playerBox").offset();
var boxHeight = jquery("#playerBox").height();
var navHeight = jquery("#playerNavAndTitle").height();
jquery("#playerNavAndTitle").css({ top:(offset.top + boxHeight - navHeight) + 1 + "px", left:offset.left + 1 + "px" });
}
[url=http://demo.jb51.net/js/ImagePlayer/index.html]演示地址
下载地址[/url]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
