|
Fecha actual 19 Jun 2013, 23:51
|
Buscar temas sin respuesta | Ver temas activos
|
Página 1 de 1
|
[ 6 mensajes ] |
|
Ayuda. para que se vayan cambiando las fotos
| Autor |
Mensaje |
|
mick089
MiniRentabilizador
Registrado: 01 May 2010, 16:54 Mensajes: 107
|
 Ayuda. para que se vayan cambiando las fotos
hola como puedo hacer para que se vayan cambiando las fotos solas . Algo parecido a esa http://anima-love.com/
|
| 10 Ene 2011, 21:44 |
|
 ![]()
|
 |
|
power
MiniRentabilizador
Registrado: 03 Ago 2009, 02:40 Mensajes: 146
|
 Re: Ayuda. para que se vayan cambiando las fotos
En la misma página lo ves, me parece que con este código vale, cambias los nombres de las imágenes o creas imágenes con ese nombre. JS Código: /*********************************************** * Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ var fadeimages2=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages2[0]=["gallery/1.jpg", "", ""] //plain image syntax fadeimages2[1]=["gallery/2.jpg", "", ""] //image with link syntax fadeimages2[2]=["gallery/3.jpg", "", ""] //image with link and target syntax fadeimages2[3]=["gallery/4.jpg", "", ""] //image with link and target syntax
var fadebgcolor="white"
////NO need to edit beyond here///////////// var fadearray=new Array() //array to cache fadeshow instances var fadeclear=new Array() //array to cache corresponding clearinterval pointers var dom=(document.getElementById) //modern dom browsers var iebrowser=document.all function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){ this.pausecheck=pause this.mouseovercheck=0 this.delay=delay this.degree=10 //initial opacity degree (10%) this.curimageindex=0 this.nextimageindex=1 fadearray[fadearray.length]=this this.slideshowid=fadearray.length-1 this.canvasbase="canvas"+this.slideshowid this.curcanvas=this.canvasbase+"_0" if (typeof displayorder!="undefined") theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :) this.theimages=theimages this.imageborder=parseInt(borderwidth) this.postimages=new Array() //preload images for (p=0;p<theimages.length;p++){ this.postimages[p]=new Image() this.postimages[p].src=theimages[p][0] } var fadewidth=fadewidth+this.imageborder*2 var fadeheight=fadeheight+this.imageborder*2 if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox) document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>') else document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>') if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox this.startit() else{ this.curimageindex++ setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay) } }
function fadepic(obj){ if (obj.degree<100){ obj.degree+=10 if (obj.tempobj.filters&&obj.tempobj.filters[0]){ if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+ obj.tempobj.filters[0].opacity=obj.degree else //else if IE5.5- obj.tempobj.style.filter="alpha(opacity="+obj.degree+")" } else if (obj.tempobj.style.MozOpacity) obj.tempobj.style.MozOpacity=obj.degree/101 else if (obj.tempobj.style.KhtmlOpacity) obj.tempobj.style.KhtmlOpacity=obj.degree/100 else if (obj.tempobj.style.opacity&&!obj.tempobj.filters) obj.tempobj.style.opacity=obj.degree/101 } else{ clearInterval(fadeclear[obj.slideshowid]) obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1" obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas) obj.populateslide(obj.tempobj, obj.nextimageindex) obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0 setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay) } } fadeshow.prototype.populateslide=function(picobj, picindex){ var slideHTML="" if (this.theimages[picindex][1]!="") //if associated link exists for image slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">' slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">' if (this.theimages[picindex][1]!="") //if associated link exists for image slideHTML+='</a>' picobj.innerHTML=slideHTML } fadeshow.prototype.rotateimage=function(){ if (this.pausecheck==1) //if pause onMouseover enabled, cache object var cacheobj=this if (this.mouseovercheck==1) setTimeout(function(){cacheobj.rotateimage()}, 100) else if (iebrowser&&dom||dom){ this.resetit() var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) crossobj.style.zIndex++ fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50) this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0" } else{ var ns4imgobj=document.images['defaultslide'+this.slideshowid] ns4imgobj.src=this.postimages[this.curimageindex].src } this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0 } fadeshow.prototype.resetit=function(){ this.degree=10 var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) if (crossobj.filters&&crossobj.filters[0]){ if (typeof crossobj.filters[0].opacity=="number") //if IE6+ crossobj.filters(0).opacity=this.degree else //else if IE5.5- crossobj.style.filter="alpha(opacity="+this.degree+")" } else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=this.degree/101 else if (crossobj.style.KhtmlOpacity) crossobj.style.KhtmlOpacity=this.degree/100 else if (crossobj.style.opacity&&!crossobj.filters) crossobj.style.opacity=this.degree/101 } fadeshow.prototype.startit=function(){ var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) this.populateslide(crossobj, this.curimageindex) if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER var cacheobj=this var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid) crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1} crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0} } this.rotateimage() }
Supongo que este código y listo Código: <div style="border: 1px solid rgb(75, 114, 0); margin: 0pt auto; padding: 0pt; background: rgb(75, 114, 0) none repeat scroll 0% 0%; width: 900px; font-size: 12px; font-weight: bold; height: 312px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; position: relative;">
<div style="border: 1px solid rgb(75, 114, 0); margin: 0pt auto; padding: 0pt; width: 886px; height: 295px; font-size: 12px; font-weight: bold; position: absolute; left: 6px; top: 7px;">
<p class="dropmenudiv_a">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 886, 295, 0, 3000, 0)
</script>
</p>
</div>
</div>
|
| 11 Ene 2011, 00:04 |
|
 |
|
costasdaniel
Moderador
Registrado: 15 Abr 2008, 20:40 Mensajes: 2122 Ubicación: Uruguay
|
 Re: Ayuda. para que se vayan cambiando las fotos
Ya tienes una respuesta, pero te cuento que todos esos efectos estan hechos con JQuery, basta con buscar plugins de JQuery para imagenes por ejemplo y te vas a encontrar con muchos, tal vez haya alguno te guste más que otro.
_________________ Mi blog http://www.DanielCostas.com Directorios Web http://www.directoriosweb.org/
|
| 11 Ene 2011, 00:19 |
|
 |
|
oskar
MiniRentabilizador
Registrado: 08 Dic 2008, 20:46 Mensajes: 88
|
 Re: Ayuda. para que se vayan cambiando las fotos
Pasate por esta página si no la conoces ya, aqui muestran muchos efectos jquery para implementar en tus webs. http://flowplayer.org/tools/demos/tabs/ajax.htmlSaludos.  PD. En el menu derecho estan todos organizados por categorias.
|
| 11 Ene 2011, 12:57 |
|
 |
|
mick089
MiniRentabilizador
Registrado: 01 May 2010, 16:54 Mensajes: 107
|
 Re: Ayuda. para que se vayan cambiando las fotos
Si he entendido bien
Tengo que copiar el codigo javacript
Poner el mismo codigo html en el div donde aparecen las foto
Y juntar todo en la misma carpeta con las fotos o tengo que descargar tambien el jquery y ponerlo en la misma carpeta
|
| 01 Feb 2011, 20:34 |
|
 |
|
mick089
MiniRentabilizador
Registrado: 01 May 2010, 16:54 Mensajes: 107
|
 Re: Ayuda. para que se vayan cambiando las fotos
Aqui les dejo el codigo a ver si me podeis decir donde tengo que poner el codigo y que codigo... ya que se muy poco de javascript Código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!--
#apDiv1 { position:relative; margin:auto; width:850px; height:950px; z-index:1; background-color: #FFFFFF; top: 55px; }
#apDiv3 { position:absolute; width:618px; height:283px; z-index:2; left: 231px; }
--> </style> </head>
<body> <div id="apDiv1"> <div id="apDiv3"> AQUI EL DIV DONDE SE IRAN CAMBIANDO LAS IMAGENES </div>
</body> gracias 
|
| 09 Feb 2011, 03:22 |
|
 |
|
|
Página 1 de 1
|
[ 6 mensajes ] |
|
¿Quién está conectado? |
Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado |
|
No puede abrir nuevos temas en este Foro No puede responder a temas en este Foro No puede editar sus mensajes en este Foro No puede borrar sus mensajes en este Foro
|
|