有创意!翻页效果代码_网页图片特效

·网页特效库 ·网页工具库

背景按钮

导航特效

< 后退 | 收藏网页特效库

推荐网页特效

推荐网页工具

您的位置：网页特效库 >> 网页图片特效 >> 有创意!翻页效果代码	查看此特效演示

有创意!翻页效果代码

把如下代码复制到<head>与</head>之间

var Book_Image_Width=140; //此处为图片的宽度，默认为140，可修改为你需要的数值
	var Book_Image_Height=225; //此处为图片的高度，默认为225，可修改为你需要的数值
	var Book_Border=true;
	var Book_Border_Color="gray";
	var Book_Speed=15;
	var Book_NextPage_Delay=1500; //1 second=1000 //此处为图片翻转的相隔时间，可修改为你需要的数值
	var Book_Vertical_Turn=0;

Book_Image_Sources=new Array(
//下面四行是翻转图片和图片链接的代码，每行为一个图片及链接，增加或减少图片只需按下面的样式增加或减少一行代码即可，图片顺序可自由调整，注意除最后其余每行尾部都需要有一个,号
//下面左边引号中为图片的地址，右边引号中为链接地址，如不需要链接可将右边引号中的链接去掉，但要保留引号
		"image1.jpg","http://www.butong.net/", 
		"image2.jpg","http://www.butong.net/",
		"image3.jpg","http://www.butong.net/tool/", 
		"image4.jpg","http://www.butong.net/tool/"
	);

var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
	var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
			else setTimeout("BookImages()",50)}
		else setTimeout("BookImages()",50)}

function Book_Next_Delay(){
			if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
			B_RI.src=B_Pre_Img[B_CrImg].src;
			B_RI.lnk=Book_Image_Sources[B_CrImg+1];
			B_MI.style.zIndex=2;
			B_LI.style.zIndex=1;
			B_Angle=0;
			B_CrImg+=2;
		setTimeout("BookImages()",50)}

function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
	function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
	function B_Rstrt(){B_Stppd=false}
</script>

把如下代码复制到<body>与</body>之间

修改<body>标签为

使用说明：很经典的图片翻转效果，还可以在图片上加链接，<head>代码部分的"var Book_Image_Width"和"var Book_Image_Height"的值为图片的宽和高，最好是用同样大小的图片，"var Book_NextPage_Delay"为图片翻转的相隔时间，"Book_Image_Sources=new Array()"括号中的值为翻转图片和图片链接的代码，图片的数量可自由增加或减少，具体修改方法请参考代码中的注释。

上一个特效：水波纹溶解效果

返回列表

下一个特效：漂动图像-碰到边框反弹