jquery image rotation effect_jquery

Rendering:

Any errors in the code are welcome to correct

Copy code Code As follows:

/**
* @author leepood
* @title Automatic image rotation effect
* @version v2.0
* @E-Mail leepood@gmail.com
* @notice: To display the image The number can be adjusted in the setting, but the parameters of the corresponding images need to be added to imagesArray
*/
function changeImages()
{

var setting={
'width':'330px' ,
'height':'200px',
'images_count':'4',
'time':'1800', //The speed of image switching
'imageschange_border_color':'#fcf0a1 '

};
var imagesArray=[{'src':'images/1.bmp','href':'http://www.baidu.com/','title': 'Autumn, a piece of gold','target':'_blank'},
{'src':'images/2.bmp','href':'http://www.163.com','title ':'Spring gives people a feeling of vitality','target':'_blank'},
{'src':'images/3.bmp','href':'http://iagyje.blog .163.com','title':'Longan is the most delicious, I eat a lot every time','target':'_blank'},
{'src':'images/4.bmp', 'href':'http://www.sina.com/','title':'The fiery red maple leaves, take a look if you have a chance','target':'_blank'}];
//Add Element, define variables
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 "< /a>");
}
var $link_buttons=$("#imageschange a");
//Set the initial attributes of the element
//The outermost container holds all elements
$div_imageschange.css("width",setting.width)
.css("position","relative")
.css("height",setting.height)
.css(" border","solid 1px " setting.imageschange_border_color);

//The element that holds the button
$div_images_button.css("position","absolute")
.css("height", "20px")
.css("right","0px")
.css("bottom","21px")
.css("opacity","1")
. css("float","right");

//Elements that contain text descriptions
$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");
//Button combination
$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");
//Initialization settings
$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");
};
//Automatic switching code
function autochange(){
var i=0;
setInterval(function( ){
change(i);
if(i==setting.images_count-1)
{
i=-1;
}
i ;
}, setting.time);
}
autochange();
//Manual switching code
$link_buttons.each(function(i){
$(this).hover(function() {
change(i);
});
});
};
$(document).ready(function(){
changeImages();

});

The number of pictures to be displayed can be adjusted in the setting, but the parameters of the corresponding pictures need to be added to the imagesArray

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn