Mejora tu web ya: Slide, Reproductor de Imagenes con Java Script

Slide, Reproductor de Imagenes con Java Script

jueves, 27 de mayo de 2010 Leave a Comment

Este es un reporductor de imagenes, muy útil y sencillo, pero es para webmaster un poco mas expertor es muy bueno, en este puedes poner las portadas de tus ultimos temas.

Ver Ejemplo

Código

<br /> <script type="text/javascript" src="http://img5.xooimage.com/files/d/e/5/jquery-2--f80ba5.js"></script><br /> <script type="text/javascript" src="http://img25.xooimage.com/files/c/d/0/easyslider1.5-11fb25a.js"></script><br /> <script type="text/javascript">         $(document).ready(function(){                $("#slider").easySlider({                 controlsBefore:    '<p id="controls"> ',                 controlsAfter:    '</p>',                 auto: true,                 continuous: true             });             $("#slider2").easySlider({                 controlsBefore:    '<p id="controls2"> ',                 controlsAfter:    '</p>',                        prevId: 'prevBtn2',                 nextId: 'nextBtn2'                });                    });        </script><br /> <br /> <style type="text/css">              img{border:none;}          #container2{            margin:0 auto;         position:relative;         text-align:left;         width:696px;         background:#fff;                margin-bottom:2em;         }                        #content2{         position:relative;         }             /* Easy Slider */      #slider{}        #slider ul, #slider li, #slider2 ul, #slider2 li{         margin:0;         padding:0;         list-style:none;         }     #slider li, #slider2 li{         /*             define width and height of list item (slide)             entire slider area will adjust according to the parameters provided here         */         width:696px;         height:241px;         overflow:hidden;         }         #slider2 li{         background:#f1f1f1;         }            #slider2 li h2{         margin:0 20px;         padding-top:20px;         }        #slider2 li p{         margin:20px;         }                                    p#controls, p#controls2{         margin:0;         position:relative;         }         #prevBtn, #nextBtn, #prevBtn2, #nextBtn2{         display:block;         margin:0;         overflow:hidden;         text-indent:-8000px;                width:30px;         height:77px;         position:absolute;         left:-30px;         top:-160px;         }        #nextBtn, #nextBtn2{         left:696px;         }                                                            #prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{          display:block;         width:30px;         height:77px;         background:url(http://img40.xooimage.com/files/7/3/0/btn_prev-15766b5.gif) no-repeat 0 0;            }        #nextBtn a, #nextBtn2 a{         background:url(http://img44.xooimage.com/files/a/1/d/btn_next-15766b4.gif) no-repeat 0 0;            }                                                 /* // Easy Slider */  </style>   <br /> <br /> <br /> <br /> <div id="container2"><br /> <br /> <div id="content2"><br /> <div id="slider"><ul><li><a href="http://templatica.com/preview/30"><img src="http://img29.xooimage.com/files/1/9/0/01-157669e.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/7"><img src="http://img27.xooimage.com/files/5/2/f/02-15766a0.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/25"><img src="http://img43.xooimage.com/files/0/f/9/03-15766a3.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/26"><img src="http://img43.xooimage.com/files/5/7/9/04-15766a5.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/27"><img src="http://img25.xooimage.com/files/1/2/b/05-15766a7.jpg" alt="Css Template Preview" /></a></li> </ul></div><br /> <br /> <div id="slider2"><ul><li><br /> <h2>What's Templatica anyway?</h2><p>Templatica is a membership based template club where you get<br /> <strong>full access to all templates</strong> in the <a href="http://templatica.com/templates">css template gallery</a> for a single and very affordable<br /> <strong>annual fee of $24!</strong><br /> <br /> Yup, that's right! All of <a href="http://templatica.com/templates" title="CSS templates">this</a> plus <strong>all of the<br /> templates released within one year from the day you join</strong>. No extra cost, no hidden fees!<br /> <br /> You also have a possibility of purchasing a <strong>single template for as low as $5</strong>.</p></li> <li><br /> <h2>Why is the fee so low?</h2><p>I wanted to make premium templates <strong>available to as many of you as possible</strong>.<br /> <a href="http://templatica.com/templates">Templates</a> are not only meant for commercial but for<br /> <strong>educational purpose as well</strong>. I would like you to <a href="http://templatica.com/join">join</a>,<br /> download templates, analyze the code and hopefully learn something new. <br /> <br /> For those who'd like to <strong>test the quality</strong> of the templates I suggest my <strong>single template purchase option</strong>.</p></li> <li><br /> <h2>What Templatica offers</h2><p>Templatica offers static design templates with <strong>valid XHTML and CSS</strong>.<br /> All templates are tested in<strong> Firefox Win, IE7, IE6, Opera</strong> on Windows<br /> as well as <strong>Safari and Firefox</strong> on Mac. <br /> <br /> Templates are <strong>highly customizable</strong>. The download package for each template<br /> includes HTML, CSS, JavaScript files and related images.</p></li> </ul></div><br /> <br /> <br /> <br /> </div><br /> </div>

Mejora tu web ya

.

Slide, Reproductor de Imagenes con Java Script

0 comentarios »

Leave your response!

Ultimos temas

Categories

Comunidad

Seguidores

Etiquetas

Tecnologia

Post recientes

Ultimos comentarios