Hoy les voy a brindar un fabuloso slideshow es como si fuera ojeando paginas en un libro abierto que muestra dos paginas pero esta paginas van a ser imagenes cada ves que pase una ojeada muestra dos imagenes las cuales les puedes poner enlace o no tambien una ves pases el mouse por encima de una imagen esta se detendra y al quitarlo esta continuara en este codigo tenemos dos opciones que se muestre vertical o horizontal como se las muestro es vertical,mas abajo les muestro lo que podemos modificar ahora les muestro un ejemplo:
Este codigo lo debemos colocar en cualquier parte del body.
<body onload="ImageBook()"><br /> <script type="text/javascript"><br /> <br /> var Book_Image_Width=150;<br /> var Book_Image_Height=230;<br /> var Book_Border=true;<br /> var Book_Border_Color="gray";<br /> var Book_Speed=16;<br /> var Book_NextPage_Delay=1600; //1 segundo=1000<br /> var Book_Vertical_Turn=0; <br /> <br /> <br /> <br /> Book_Image_Sources=new Array(<br /> "http://dl.dropbox.com/u/25944020/images6.jpg","http://www.tubetrucos.com",<br /> "http://dl.dropbox.com/u/25944020/images5.jpg","http://www.tubetrucos.com",<br /> "http://dl.dropbox.com/u/25944020/images1.jpg","http://www.tubetrucos.com",<br /> "http://dl.dropbox.com/u/25944020/images2.jpg","http://www.tubetrucos.com",<br /> "http://dl.dropbox.com/u/25944020/images3.jpg","http://www.tubetrucos.com", <br /> "http://dl.dropbox.com/u/25944020/images4.jpg","http://www.tubetrucos.com" <br /> );<br /> <br /> <br /> var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;<br /> var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);<br /> <br /> function ImageBook(){<br /> if(document.getElementById){<br /> for(i=0;i<Book_Image_Sources.length;i+=2){<br /> B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}<br /> Book_Div=document.getElementById("Book");<br /> B_LI=document.createElement("img");Book_Div.appendChild(B_LI); <br /> B_RI=document.createElement("img");Book_Div.appendChild(B_RI);<br /> B_MI=document.createElement("img");Book_Div.appendChild(B_MI); <br /> B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";<br /> B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;<br /> B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";<br /> B_LI.style.left=0+"px";<br /> B_MI.style.top=0+"px";<br /> B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";<br /> B_RI.style.top=0+"px";<br /> B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";<br /> B_LI.style.height=Book_Image_Height+"px";<br /> B_MI.style.height=Book_Image_Height+"px";<br /> B_RI.style.height=Book_Image_Height+"px";<br /> B_LI.style.width=Book_Image_Width+"px";<br /> B_MI.style.width=Book_Image_Width+"px";<br /> B_RI.style.width=Book_Image_Width+"px";<br /> if(Book_Border){<br /> B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";<br /> B_LI.style.borderWidth=1+"px";<br /> B_MI.style.borderWidth=1+"px";<br /> B_RI.style.borderWidth=1+"px";<br /> B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}<br /> B_LI.src=B_Pre_Img[0].src;<br /> B_LI.lnk=Book_Image_Sources[1];<br /> B_MI.src=B_Pre_Img[2].src;<br /> B_MI.lnk=Book_Image_Sources[3];<br /> B_RI.src=B_Pre_Img[4].src;<br /> B_RI.lnk=Book_Image_Sources[5];<br /> B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;<br /> B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;<br /> B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;<br /> BookImages()}}<br /> <br /> function BookImages(){<br /> if(!B_Stppd){<br /> if(Book_Vertical_Turn){<br /> B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));<br /> MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;<br /> B_MI.style.top=MidOffset+"px";<br /> B_MI.style.height=B_MSz+"px"}<br /> else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));<br /> MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;<br /> B_MI.style.left=MidOffset+"px";<br /> B_MI.style.width=B_MSz+"px"}<br /> B_Angle+=Book_Speed/720*Math.PI;<br /> if(B_Angle>=Math.PI/2&&B_Direction){<br /> B_Direction=0;<br /> if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;<br /> B_MI.src=B_Pre_Img[B_CrImg].src;<br /> B_MI.lnk=Book_Image_Sources[B_CrImg+1];<br /> B_CrImg+=2}<br /> if(B_Angle>=Math.PI){<br /> B_Direction=1;<br /> B_TI=B_LI;<br /> B_LI=B_MI;<br /> B_MI=B_TI;<br /> if(Book_Vertical_Turn)B_MI.style.top=0+"px";<br /> else B_MI.style.left=Book_Image_Width+1+"px"; <br /> B_MI.src=B_RI.src;<br /> B_MI.lnk=B_RI.lnk;<br /> <br /> setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}<br /> else setTimeout("BookImages()",50)}<br /> else setTimeout("BookImages()",50)}<br /> <br /> function Book_Next_Delay(){<br /> if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;<br /> B_RI.src=B_Pre_Img[B_CrImg].src;<br /> B_RI.lnk=Book_Image_Sources[B_CrImg+1];<br /> B_MI.style.zIndex=2;<br /> B_LI.style.zIndex=1;<br /> B_Angle=0;<br /> B_CrImg+=2;<br /> setTimeout("BookImages()",50)}<br /> <br /> function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}<br /> function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}<br /> function B_Rstrt(){B_Stppd=false}<br /> </script><br /> <br /> <div id="Book" style="position:relative"><br /> <img src="http://dl.dropbox.com/u/25944020/tubetrucosplaceholder.gif" width="144" height="227"><br /> </div><br /> <br /> <br /> <br />
Lo que podemos modificar
var Book_Image_Width=150; El ancho de las imagenes
var Book_Image_Height=230; La altura de las imagenes
var Book_Border=true; si deceas borde true o false
var Book_Border_Color="gray"; color del borde
var Book_Speed=16; la velocidad
var Book_NextPage_Delay=1600; un 1 segundo=1000
var Book_Vertical_Turn=0; vertical o horizontal
Donde dice :
Book_Image_Sources=new Array(
"http://dl.dropbox.com/u/25944020/images6.jpg","http://www.tubetrucos.com", "http://dl.dropbox.com/u/25944020/images5.jpg","http://www.tubetrucos.com",
"http://dl.dropbox.com/u/25944020/images1.jpg","http://www.tubetrucos.com",
Lo que esta en rojo lo deben cambiar por su imagen y su url de enlace.
eso es todo espero y lo disfruten.
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
0 comentarios:
Publicar un comentario