效果图:
代码中存在的错误欢迎大家指正
复制代码 代码如下:
/**
* @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_imageschange.append(
);
var $div_images_title=$(#images_title);
var $div_images_button=$(#images_button);
var count=setting.images_count;
for(var a=0;a{
var b=a+1;
$div_images_button.append(+b+);
}
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中加入相应图片的参数