jquery 图片轮换效果

效果图:

代码中存在的错误欢迎大家指正

/** 
* @author leepood 
* @title 图片自动轮换效果 
* @version v2.0 
* @E-Mail [e-mail] 
* @notice:要显示图片的数目可以在setting里调整，但需要在imagesArray中加入相应图片的参数 
*/ 
function changeImages() 
{ var setting={ 
'width':'330px', 
'height':'200px', 
'images_count':'4', 
'time':'1800', //图片切换的速度 
'imageschange_border_color':'#fcf0a1' 
}; 
var imagesArray=[{'src':'images/1.bmp','href':'http://www.baidu.com/','title':'秋天，一片金色','target':'_blank'}, 
{'src':'images/2.bmp','href':'http://www.163.com','title':'春天，给人一片生机的感觉','target':'_blank'}, 
{'src':'images/3.bmp','href':'http://iagyje.blog.163.com','title':'龙眼最好吃了，我每次吃好多的','target':'_blank'}, 
{'src':'images/4.bmp','href':'http://www.sina.com/','title':'火红的枫叶啊，有机会看看去','target':'_blank'}]; 
//添加元素，定义变量 
var $div_imageschange=$("#imageschange"); 
$div_imageschange.children().css("margin","0px").css("padding","0px"); 
$div_imageschange.append("<div id='images_button'></div>"); 
$div_imageschange.append("<div id='images_title'></div>"); 
var $div_images_title=$("#images_title"); 
var $div_images_button=$("#images_button"); 
var count=setting.images_count; 
for(var a=0;a<count;a++) 
{ 
var b=a+1; 
$div_images_button.append("<a id='"+b+"'>"+b+"</a>"); 
} 
var $link_buttons=$("#imageschange a"); 
//设置元素的初始属性 
//最外层容器，容纳所有元素 
$div_imageschange.css("width",setting.width) 
.css("position","relative") 
.css("height",setting.height) 
.css("border","solid 1px "+setting.imageschange_border_color); 
//容纳按钮的元素 
$div_images_button.css("position","absolute") 
.css("height","20px") 
.css("right","0px") 
.css("bottom","21px") 
.css("opacity","1") 
.css("float","right"); 
//容纳文字说明的元素 
$div_images_title.css("position","absolute") 
.css("height","20px") 
.css("width",setting.width) 
.css("bottom","0px") 
.css("right","0px") 
.css("background-color","black") 
.css("opacity","0.6") 
.css("font-size","12px") 
.css("color","white"); 
//按钮组合 
$link_buttons.css("width","15px") 
.css("height","15px") 
.css("border","solid 1px #fcf0a1") 
.css("display","block") 
.css("margin","0 5px 5px 5px") 
.css("font-size","12px") 
.css("text-align","center") 
.css("float","left") 
.css("color","white") 
.css("text-decoration","none"); 
//初始化设定 
$div_imageschange.css("background-image","url('images/1.bmp')"); 
$div_images_title.html(imagesArray[0].title); 
$("#images_button a:first").css("background","#fcf0a1"); 
function change(index){ 
$div_imageschange.css("background-image", "none"); 
$div_imageschange.css("background-image", "url('" + imagesArray[index].src + "')"); 
$div_images_title.html(""); 
$div_images_title.html(imagesArray[index].title); 
$($link_buttons[index]).attr("href", imagesArray[index].href).attr("target", imagesArray[index].target); 
$link_buttons.css("background",""); 
$($link_buttons[index]).css("background","#fcf0a1"); 
}; 
//自动切换代码 
function autochange(){ 
var i=0; 
setInterval(function(){ 
change(i); 
if(i==setting.images_count-1) 
{ 
i=-1; 
} 
i++; 
},setting.time); 
} 
autochange(); 
//手动切换代码 
$link_buttons.each(function(i){ 
$(this).hover(function(){ 
change(i); 
}); 
}); 
}; 
$(document).ready(function(){ 
changeImages(); 
});

要显示图片的数目可以在setting里调整，但需要在imagesArray中加入相应图片的参数