JS带纵向缩略图的焦点图片切换（可自动播放五幅）

来源：互联网发布：颜值高的les电影知乎编辑：程序博客网时间：2024/04/30 23:08

带纵向缩略图的焦点图片（可自动播放/五幅）

/* 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; }

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"),

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页面中调用：

<dl>

</dl>

</div>

<![CDATA[//><!--

var FocusPic_01 = new FocusPic("bigPic","smallPic","title","info",610,400);

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>

JS带纵向缩略图的焦点图片切换（可自动播放 五幅）

JS带纵向缩略图的焦点图片切换（可自动播放五幅）