jquery 图片轮换效果

2020-05-22 16:47:11易采站长站整理

.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中加入相应图片的参数