html图片翻页效果代码,js图片翻书效果代码分享

这是一款基于javascript实现图片翻书效果代码，图片可以从左右两个方向进行切换，用户还可以自定义对应图片的标题与文字说明，是一款非常实用的图片特效源码。

七夕情人节也可以是表白的神器，放一些回忆的照片，还可以永久保存，是不是很有心意，推荐给大家，有需要的小伙伴可以学习学习。

运行效果图：

大家可以先运行一下    -------------------------------------效果运行-----------------------------------------

为大家分享的jQuery幻灯片带缩略图轮播代码如下

JS实现图片翻书效果

#center {

LEFT: 50%; POSITION: absolute; TOP: 50%

}

#DHTMLBOOK {

BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px

}

#TXTBOX {

FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center

}

.page {

OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%

}

.right {

BORDER-RIGHT: #000000 1px solid; LEFT: 50%

}

.turn {

BACKGROUND: #000000

}

.img {

WIDTH: 200%; POSITION: absolute; HEIGHT: 100%

}

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

var nI = 0;

var kI = 0;

var run = false;

function setOpacity(obj,o) {

if (o100) o = 100;

if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;

}

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

}

}

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

} 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

}

}

function TPL() {

if (!run) {

run = true;

P02i.src = IMGSRC[kI].src;

P2.style.width = 0;

kI--;

if (kI

titLe(kI);

P01i.src = IMGSRC[kI].src;

P2i.src = IMGSRC[kI].src;

for(var i=1; i

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

}

function titLe(p) {

document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;

}

onload = function() {

IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img");

DB = document.getElementById("DHTMLBOOK");

P01 = DB.getElementsByTagName("span")[0];

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

P02 = DB.getElementsByTagName("span")[1];

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

P1 = DB.getElementsByTagName("span")[2];

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

P2 = DB.getElementsByTagName("span")[3];

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

nI = IMGSRC.length;

P1i.src = IMGSRC[kI].src;

P2i.src = IMGSRC[kI].src;

titLe(kI);

DB.style.visibility = "visible";

}

//-->

以上就是为大家分享的javascript图片翻书效果，希望大家可以喜欢。