效果图:
代码中存在的错误欢迎大家指正
/**
* @author leepood
* @title 图片自动轮换效果
* @version v2.0
* @E-Mail leepood@gmail.com
* @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″)










