/**
* @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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
