jquery 图片轮换效果

　　/**

　　* @author leepood

　　* @title 图片自动轮换效果

　　* @version v2.0

　　* @E-Mail [email protected]

　　* @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();

　　});