带纵向缩略图的焦点图片（可自动播放/五幅）
<link href="Css/style_new.css" rel="stylesheet" type="text/css" />
/* CSS Document */
body{margin:0 0; font-size:12px; font-family:宋体;}
fieldset,img,button{border:0}
p{margin:0px; padding:0px}
img { border:0; vertical-align:middle; }
/*links*/
a:link,a:visited{ color: #4C4C4C; text-decoration:none;}
a:hover{color:#FF3333; text-decoration:underline;}
/*normal*/
.conleft{width:770px; float:left; margin-top:0px; margin-left:0px;}
/*slideshow_new*/
.bigPic { width:610px; float:right; margin:5px; display:inline; }
#bigPic { height:365px; }
.bigPic img { border:1px solid #FFF; height:400px }
.bigPic dl { height:40px; line-height:20px; overflow:hidden; padding:5px 10px; position:relative; margin:-51px 1px 0;}
.bigPic dt { line-height:22px; height:22px; overflow:hidden; font-size:14px; }
.bigPic dl, .bigPic dl a { color:#666; }
.smallPic { width:140px; float:left; text-align:center; margin-top:10px; padding-left:7px }
.smallPic img { width:135px; height:65px; margin-bottom:8px; }
.smallPic .selected img { width:125px; height:57px; padding:2px; background:#F1308D; border:2px #F1308D solid; }
.jiaodian_bg { margin:-50px -1px 0; height:50px; background:#FFF; filter:alpha(opacity:70);opacity:0.65; position:relative; }
/* 框架 */
.m1L {width:770px; height:307px; float:left; background:#EBEBEB; }
<script type="text/javascript" src="js/jiaodian.js"></script>
var FocusPic = function(BigPicID, SmallPicsID, TitleID, MemoID, width, height) {
this.Data = [];
this.ImgLoad = [];
this.TimeOut = 5000;
var isIE = navigator.appVersion.indexOf("MSIE") != -1 ? true: false;
this.width = width;
this.height = height;
this.adNum = 0;
var TimeOutObj;
if (!FocusPic.childs) {
FocusPic.childs = []
};
this.showTime = null;
this.showSum = 10;
this.ID = FocusPic.childs.push(this) - 1;
this.Add = function(BigPic, SmallPic, Title, Url, Memo) {
var ls;
this.Data.push([BigPic, SmallPic, Title, Url, Memo]);
ls = this.ImgLoad.length;
this.ImgLoad.push(new Image);
this.ImgLoad[ls].src = BigPic
};
this.TimeOutBegin = function() {
clearInterval(TimeOutObj);
TimeOutObj = setInterval("FocusPic.childs[" + this.ID + "].next()", this.TimeOut)
};
this.TimeOutEnd = function() {
clearInterval(TimeOutObj)
};
this.select = function(num) {
if (num > this.Data.length - 1) {
return
};
if (num == this.adNum) {
return
};
this.TimeOutBegin();
if (BigPicID) {
if (this.$(BigPicID)) {
var aObj = this.$(BigPicID).getElementsByTagName("a")[0];
aObj.href = this.Data[num][2];
if (this.aImgY) {
this.aImgY.style.display = 'none';
this.aImg.style.zIndex = 0
};
this.aImgY = this.$('F' + this.ID + 'BF' + this.adNum);
this.aImg = this.$('F' + this.ID + 'BF' + num);
clearTimeout(this.showTime);
this.showSum = 10;
this.showTime = setTimeout("FocusPic.childs[" + this.ID + "].show()", 5)
}
};
if (TitleID) {
if (this.$(TitleID)) {
this.$(TitleID).innerHTML = "<a href='" + this.Data[num][2] + "' target='_blank'>" + this.Data[num][3] + "</a>"
}
};
if (MemoID) {
if (this.$(MemoID)) {
this.$(MemoID).innerHTML = this.Data[num][4]
}
};
if (SmallPicsID) {
if (this.$(SmallPicsID)) {
var sImg = this.$(SmallPicsID).getElementsByTagName("span"),
i;
for (i = 0; i < sImg.length; i++) {
if (i == num || num == (i - this.Data.length)) {
sImg[i].className = "selected"
} else {
sImg[i].className = ""
}
}
}
};
if (this.onselect) {
this.onselect()
};
this.adNum = num
};
var absPosition = function(obj, parentObj) {
var left = obj.offsetLeft,
top = obj.offsetTop,
tempObj = obj;
while (tempObj.id != document.body & tempObj.id != document.documentElement & tempObj != parentObj) {
tempObj = tempObj.offsetParent;
left += tempObj.offsetLeft;
top += tempObj.offsetTop
};
return {
left: left,
top: top
}
};
this.show = function() {
this.showSum--;
this.aImgY.style.display = 'block';
this.aImg.style.display = 'block';
if (isIE) {
this.aImg.style.filter = "alpha(opacity=0)";
this.aImg.style.filter = "alpha(opacity=" + (10 - this.showSum) * 10 + ")"
} else {
this.aImg.style.opacity = 0;
this.aImg.style.opacity = (10 - this.showSum) * 0.1
};
if (this.showSum <= 0) {
this.aImgY.style.display = 'none';
this.aImg.style.zIndex = 0;
this.aImgY = null
} else {
this.aImg.style.zIndex = 2;
this.showTime = setTimeout("FocusPic.childs[" + this.ID + "].show()", 5)
}
};
this.next = function() {
var temp = this.adNum;
temp++;
if (temp >= this.Data.length) {
temp = 0
};
this.select(temp)
};
this.MInStopEvent = function(ObjID) {
if (ObjID) {
if (this.$(ObjID)) {
if (this.$(ObjID).attachEvent) {
this.$(ObjID).attachEvent("onmouseover", Function("FocusPic.childs[" + this.ID + "].TimeOutEnd()"));
this.$(ObjID).attachEvent("onmouseout", Function("FocusPic.childs[" + this.ID + "].TimeOutBegin()"))
} else {
this.$(ObjID).addEventListener("mouseover", Function("FocusPic.childs[" + this.ID + "].TimeOutEnd()"), false);
this.$(ObjID).addEventListener("mouseout", Function("FocusPic.childs[" + this.ID + "].TimeOutBegin()"), false)
}
}
}
};
this.begin = function() {
this.MInStopEvent(TitleID);
this.MInStopEvent(SmallPicsID);
this.MInStopEvent(BigPicID);
this.adNum = 0;
var i,
temp = "";
if (BigPicID) {
if (this.$(BigPicID)) {
var aObj = this.$(BigPicID).getElementsByTagName("a")[0];
aObj.style.zoom = 1;
this.$(BigPicID).style.position = "relative";
this.$(BigPicID).style.zoom = 1;
this.$(BigPicID).style.overflow = "hidden";
for (i = 0; i < this.Data.length; i++) {
temp += '<img src="' + this.Data[i][0] + '" id="F' + this.ID + 'BF' + i + '" style="display:' + (i == this.adNum ? 'block': 'none') + '" galleryimg="no"' + (this.width ? ' width="' + this.width + '"': '') + (this.height ? ' height="' + this.height + '"': '') + ' alt="' + this.Data[i][3] + '" />'
};
aObj.innerHTML = temp;
var imgObjs = aObj.getElementsByTagName("img"),
XY = absPosition(imgObjs[0], this.$(BigPicID));
}
};
if (SmallPicsID) {
if (this.$(SmallPicsID)) {
temp = "";
for (i = 0; i < this.Data.length; i++) {
temp += "<span" + (this.adNum == i ? ' class="selected"': "") + "><a href='" + this.Data[i][2] + "' target='_blank'><img src='" + this.Data[i][1] + "' onmouseover='FocusPic.childs[" + this.ID + "].select(" + i + ")' alt='" + this.Data[i][3] + "' /></a></span>"
};
this.$(SmallPicsID).innerHTML = temp
}
};
if (TitleID) {
if (this.$(TitleID)) {
this.$(TitleID).innerHTML = "<a href='" + this.Data[this.adNum][2] + "' target='_blank'>" + this.Data[this.adNum][3] + "</a>"
}
};
if (MemoID) {
if (this.$(MemoID)) {
this.$(MemoID).innerHTML = this.Data[this.adNum][4]
}
};
this.TimeOutBegin()
};
this.$ = function(objName) {
if (document.getElementById) {
return eval('document.getElementById("' + objName + '")')
} else {
return eval('document.all.' + objName)
}
}
};
在.aspx页面中调用：
<div class="conleft">
<div class="m1L">
<div class="bigPic">
<p id="bigPic"><a href="#" target="_blank"></a></p>
<div class="jiaodian_bg"></div>
<dl>
<dt id="title"></dt>
<dd id="info"></dd>
</dl>
</div>
<div class="smallPic" id="smallPic"></div>
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
var FocusPic_01 = new FocusPic("bigPic","smallPic","title","info",610,400);<!--gamex-->
FocusPic_01.Add('propic/01.jpg','propic/01.jpg',"","百游最新3D巨作《梦境之城》","真实水体贴图效果体验波光粼粼");
FocusPic_01.Add('propic/02.jpg','propic/02.jpg',"","百游最新3D巨作《梦境之城》","《梦境之城》交通港口");
FocusPic_01.Add('propic/03.jpg','propic/03.jpg',"","百游最新3D巨作《梦境之城》","《梦境之城》主城雕塑");
FocusPic_01.Add('propic/04.jpg','propic/04.jpg',"","百游最新3D巨作《梦境之城》","《梦境之城》美丽截图如同《阿凡达》");
FocusPic_01.Add('propic/05.jpg','propic/05.jpg',"","百游最新3D巨作《梦境之城》","《梦境之城》巨大花朵充满异域风情");
FocusPic_01.begin();
//--><!]]>
</script>
</div>
</div>
