<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body style="margin: 0">
<div id="picDiv" style="position: relative;margin: 0 auto;"></div>
</body>
<script>
/***
*Picture class
*@param width : picture width [must have]
*@param hasPage: if has pages,default :true [options]
*@param pageSelectColor: page select color,default :#CC0066 [options]
*@param pageUnselectColor: page not select,default :#009900 color [options]
*@param intervalTime: page show interval time,default :2000ms [options]
***/
function Picture(config) {
//all picture array
this.pics = [];
//select currentIndex
this.currentIndex = 0;
//should run next
this.runNext = true;
this.config = {
width : 0,//pictrue width
hasPage : true,//if has 1,2,3 ... page
pageSelectColor : "#CC0066", //current page
pageUnselectColor : "#009900" ,//not current page
intervalTime :2000
}
for(i in config){
typeof this.config[i] != "undefined" ? this.config[i] = config[i] :"";
}
this.pageDivCss = "position:absolute;bottom:10px;z-index:10000;height:20px;width:"
+ (this.config.width - 20) + "px";
this.pageButtonCss = "width:20px;height:20px;text-align:center ;";
this.imageElementId = '_imageId';
}
Picture.prototype={
add : function(option) {
this.pics.push(option);
},
__pageChangeColor : function(option) {
for ( var i = 0; i < this.pics.length; i++) {
document.getElementById("pageId" + i).style.background = this.config.pageUnselectColor;
}
document.getElementById("pageId" + option.pageIndex).style.background = this.config.pageSelectColor;
},
__bindEvent: function(eventName,func){
if(this.addEventListener){// firefox , w3c
this.addEventListener(eventName,func,false);
}else{
this.attachEvent("on"+eventName,func);
}
},
build : function() {
var picObjThis = this;
//init picDiv width, height
var picDiv = document.getElementById("picDiv");
picDiv.style.width = this.config.width + "px";
//init first img ,page button
var imgHtml = '<a href="'+this.pics[0].link+'" target="_blank" id="aHrefId"> <img id="'+this.imageElementId+'" src="'+this.pics[0].url +'" width="'+this.config.width+'px"/></a>';
//if config pages
if(this.config.hasPage){
//construct all page button
var pageButtonDivs= [];
for ( var i = this.pics.length - 1; i >= 0; i--) {
pageButtonDivs.push('<div style="padding-left:3px;float:right;"><div id = "pageId'+i+'" style="'+this.pageButtonCss+'">'
+ i + '</div></div>');
}
var pageDivHtml = '<div id="pageDiv" style="' + this.pageDivCss + '">';
var pagesHtml = pageButtonDivs.join("");
var contentHtml = imgHtml + pageDivHtml + pagesHtml + '</div>';
picDiv.innerHTML = contentHtml;
//alert(contentHtml)
//select first
this.__pageChangeColor({
pageIndex : 0
})
//add mouse event to page button div
for ( var i = 0; i < this.pics.length; i++) {
var pageIdDiv = document.getElementById("pageId" + i);
pageIdDiv.onmouseover = function() {
picObjThis.currentIndex = parseInt(this.innerHTML);
picObjThis.__pageChangeColor({
pageIndex : picObjThis.currentIndex
})
document.getElementById(picObjThis.imageElementId).src = picObjThis.pics[picObjThis.currentIndex].url;
//img link url
document.getElementById("aHrefId").href = picObjThis.pics[picObjThis.currentIndex].link;
//don't show next pic
picObjThis.runNext = false;
};
this.__bindEvent.call(
pageIdDiv,
"mouseout",
function() {
//show next pic
picObjThis.runNext = true;
}
);
}
}else{
picDiv.innerHTML = imgHtml;
}
window.setInterval(
function() {
if (picObjThis.runNext) {
picObjThis.currentIndex++;
picObjThis.currentIndex = picObjThis.currentIndex >= picObjThis.pics.length ? 0
: picObjThis.currentIndex;
//if has pages
if(picObjThis.config.hasPage){
picObjThis.__pageChangeColor({
pageIndex : picObjThis.currentIndex
});
}
document.getElementById(picObjThis.imageElementId).src = picObjThis.pics[picObjThis.currentIndex].url;
//img link url
document.getElementById("aHrefId").href = picObjThis.pics[picObjThis.currentIndex].link;
}
}, picObjThis.config.intervalTime);
}
}
//使用方法,你只需new 一个Picture对像,指定宽||[是否有页码等参数]
//调用add方法把源图片的地址,链接保存
//最后调用build方法,就可以大功告成了,
//注意:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
// 必须声明,否则IE下不能运行
// 使用DEMO:
var pic = new Picture({
width: 400
});
//如果你不想要页码效果 var pic = new Picture({width: 400,hasPage: false });参数内容你可以参照类注释
pic.add({
url : "018.JPG",
link : "http://www.baidu.com"
});
pic.add({
url : "019.JPG",
link : "http://games.qq.com/d/onlinegame/2/1111/piclib.shtml#typeid=14&picid=27031"
});
pic.add({
url : "020.JPG",
link : "http://blog.csdn.net/gaochh01/article/details/7784479"
});
pic.build();
</script>