翻页相册 - 代码综合教程

全部代码··更换里面图片地址即可~

<HTML>

<HEAD>

<TITLE>点击翻页相册</TITLE>

<META http-equiv=Content-Type content="text/html;

charset=gb2312">

BODY {

PADDING-RIGHT: 0px;

PADDING-LEFT: 0px;

BACKGROUND: #111;

LEFT: 0px;

PADDING-BOTTOM: 0px;

MARGIN: 0px;

OVERFLOW: hidden;

WIDTH: 500;

CURSOR: crosshair;

PADDING-TOP: 0px;

POSITION: absolute;

TOP: 0px;

HEIGHT: 391;

background-color: #553FAA;

}

.DHTMLBOOK {

BACKGROUND: #000; LEFT: 0px; WIDTH: 516px; POSITION:

relative; TOP: 0px; HEIGHT: 391px

}

#Layer1 {

position:absolute;

width:635px;

height:365px;

z-index:1;

left: 41px;

top: 415px;

}

body,td,th {

color: #FFFF00;

}

#Layer2 {

position:absolute;

width:200px;

height:47px;

z-index:1;

left: 75px;

top: 401px;

}

.STYLE3 {

font-size: 16px;

font-weight: bold;

font-family: "黑体";

}

</STYLE>

<SCRIPT type=text/javascript><!--

window.onerror = new Function("return true");

screen.bufferDepth = 16;

document.onselectstart = function () { return false; }

var nI = 0;

var kI = 0;

var run = false;

function setOpacity(obj,o){

if(o<0)o=0; else if(o>100)o=100;

if(obj.filters)obj.filters.alpha.opacity=o;

}

function TPR__(p){

P1.style.left = 50-(2.5*p)+"%";

P1.style.width = (2.5*p)+"%";

setOpacity(P1i,.5*p*p);

if(p==20)run = false;

}

function TPR_(p){

P2.style.width = 50-(2.5*p)+"%";

setOpacity(P2i,100-.5*(p*p));

if(p==20){

P2i.src = IMGSRC[kI].src;

setOpacity(P2i,100);

P2.style.width = "50%";

for(var i=1;i<=20;i++)setTimeout("TPR__("+i+")",i*32);

}

function TPR(){

if(!run){

run = true;

P01i.src = IMGSRC[kI].src;

P1.style.width = 0;

kI++;

if(kI>=nI)kI = 0;

titLe(kI);

P02i.src = IMGSRC[kI].src;

P1i.src = IMGSRC[kI].src;

for(var i=1;i<=20;i++)setTimeout("TPR_("+i+")",i*32);

} else setTimeout("TPR()",100);

}

function TPL__(p){

P2.style.width = (2.5*p)+"%";

setOpacity(P2i,.5*p*p);

if(p==20)run = false;

}

function TPL_(p){

P1.style.left = (2.5*p)+"%";

P1.style.width = 40+(10-2.5*p)+"%";

setOpacity(P1i,100-.5*(p*p));

if(p==20){

P1i.src = IMGSRC[kI].src;

setOpacity(P1i,100);

P1.style.left = 0;

P1.style.width = "50%";

for(var i=1;i<=20;i++)setTimeout("TPL__("+i+")",i*32);

}

function TPL(){

if(!run){

run = true;

P02i.src = IMGSRC[kI].src;

P2.style.width = 0;

kI--;

if(kI<0)kI = nI-1;

titLe(kI);

P01i.src = IMGSRC[kI].src;

P2i.src = IMGSRC[kI].src;

for(var i=1;i<=20;i++)setTimeout("TPL_("+i+")",i*32);

} else setTimeout("TPL()",100);

}

function titLe(p){

document.getElementById("TXTBOX").innerHTML = IMGSRC

[p].alt;

}

onload = function() {

IMGSRC = document.getElementById

("imgsrc").getElementsByTagName("img");

P01 = document.getElementById

("DHTMLBOOK").getElementsByTagName("span")[0];P01i =

P01.getElementsByTagName("img")[0];

P02 = document.getElementById

("DHTMLBOOK").getElementsByTagName("span")[1];P02i =

P02.getElementsByTagName("img")[0];

P1 = document.getElementById

("DHTMLBOOK").getElementsByTagName("span")[2];P1i =

P1.getElementsByTagName("img")[0];

P2 = document.getElementById

("DHTMLBOOK").getElementsByTagName("span")[3];P2i =

P2.getElementsByTagName("img")[0];

nI = IMGSRC.length;

P1i.src = IMGSRC[kI].src;

P2i.src = IMGSRC[kI].src;

titLe(kI);

}

//-->

</SCRIPT>

<META content="MSHTML 6.00.2900.2873"

name=GENERATOR></HEAD>

<BODY>

<DIV class=DHTMLBOOK id=DHTMLBOOK><SPAN onmousedown="return

false;"

ondblclick=TPL();

style="LEFT: 0px; OVERFLOW: hidden; BORDER-LEFT: #000000

0pt solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute;

TOP: 0px; HEIGHT: 100%"

onclick=TPL();><IMG

style="LEFT: 0px; WIDTH: 200%; POSITION: absolute; TOP:

0px; HEIGHT: 100%">

</SPAN><SPAN onmousedown="return false;" ondblclick=TPR();

style="BORDER-RIGHT: #000000 0pt solid; LEFT: 50%;

OVERFLOW: hidden; WIDTH: 50%; CURSOR: pointer; POSITION:

absolute; TOP: 0px; HEIGHT: 100%"

onclick=TPR();><IMG

style="LEFT: -100%; WIDTH: 200%; POSITION: absolute; TOP:

0px; HEIGHT: 100%">

</SPAN><SPAN onmousedown="return false;" ondblclick=TPL();

style="BACKGROUND: #000000; LEFT: 0px; OVERFLOW: hidden;

BORDER-LEFT: #000000 0pt solid; WIDTH: 50%; CURSOR:

pointer; POSITION: absolute; TOP: 0px; HEIGHT: 100%"

onclick=TPL();><IMG

style="FILTER: alpha(); LEFT: 0px; WIDTH: 200%; POSITION:

absolute; TOP: 0px; HEIGHT: 100%">

</SPAN><SPAN onmousedown="return false;" ondblclick=TPR();

style="BORDER-RIGHT: #000000 0pt solid; BACKGROUND:

#000000; LEFT: 50%; OVERFLOW: hidden; WIDTH: 50%; CURSOR:

pointer; POSITION: absolute; TOP: 0px; HEIGHT: 100%"

onclick=TPR();><IMG

style="FILTER: alpha(); LEFT: -100%; WIDTH: 200%; POSITION:

absolute; TOP: 0px; HEIGHT: 100%">

</SPAN>

<DIV id=TXTBOX

style="FONT-SIZE: 0.8em; LEFT: 0px; WIDTH: 516px; COLOR:

#aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP:

320px; TEXT-ALIGN: center"></DIV></DIV></DIV>

<DIV id=imgsrc style="VISIBILITY: hidden"><IMG alt=""

src="http://wjwz.swf.im/images\jiazaitp/1.jpg"> <IMG

alt="01"

src="http://wjwz.swf.im/images\jiazaitp/2.jpg"> <IMG

alt="02"

src="http://wjwz.swf.im/images\jiazaitp/3.jpg"> <IMG

alt="03"

src="http://wjwz.swf.im/images\jiazaitp/4.jpg"> <IMG

alt="04"

src="http://wjwz.swf.im/images\jiazaitp/5.jpg"> <IMG

alt="05"

src="http://wjwz.swf.im/images\jiazaitp/6.jpg"> <IMG

alt="06"

src="http://wjwz.swf.im/images\jiazaitp/7.jpg"> <IMG

alt="07"

src="http://wjwz.swf.im/images\jiazaitp/8.jpg"> <IMG

alt="08"

src="http://wjwz.swf.im/images\jiazaitp/9.jpg"> <IMG

alt="09"

src="http://wjwz.swf.im/images\jiazaitp/10.jpg"> <IMG

alt="10"

src="http://wjwz.swf.im/images\jiazaitp/11.jpg"> <IMG

alt="11"

src="http://wjwz.swf.im/images\jiazaitp/12.jpg"> <IMG

alt="12"

src="http://wjwz.swf.im/images\jiazaitp/13.jpg"></DIV><SPAN

id=LB0 style="LEFT: 250; POSITION: absolute; TOP: 30"><SPAN

style="FONT-SIZE: 10px; LEFT: 50px; COLOR: #ffffff; FONT-

FAMILY: arial; POSITION: absolute; TOP: 30px">图片下载缓冲中

...</SPAN>

<SPAN

style="FONT-SIZE: 0px; BACKGROUND: #333; LEFT: -50px;

WIDTH: 100px; POSITION: absolute; TOP: -5px; HEIGHT:

10px"><SPAN

id=LB1

style="FONT-SIZE: 0px; BACKGROUND: #ffffff; LEFT: 0px;

WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT:

10px"></SPAN></SPAN></SPAN>

<SCRIPT>m00=document.getElementById

("imgsrc").getElementsByTagName

("img");m01=m00.length;function images_loading_bar()

{m02=0;for(i=0;i<m01;i++)m02+=(m00.complete)?

1:0;document.getElementById("LB1").style.width=Math.round

(m02/m01*100);if(m02==m01)setTimeout

("document.getElementById

('LB0').style.display='none'",128); else setTimeout

("images_loading_bar()", 64);};images_loading_bar

();</SCRIPT>

<div class="STYLE3" id="Layer2">点击左右翻下一张图片</div>

</BODY>

</HTML>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。