Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje18-11-2009, 02:58 (UTC)    
Título del mensaje: [Código Javascript] Easy Slider 1.5 Buenaso!!



Vista En Vivo: http://tiny.cc/easyslider15

Todo El Codigo Va En El Editor

Código:
<script type="text/javascript" src="http://img5.xooimage.com/files/d/e/5/jquery-2--f80ba5.js"></script>
    <script type="text/javascript" src="http://img25.xooimage.com/files/c/d/0/easyslider1.5-11fb25a.js"></script>
    <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>
   
<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>   
   


<div id="container2">

   
    <div id="content2">
   
        <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>
       
       
        <div id="slider2">
            <ul>               
                <li>
                    <h2>What's Templatica anyway?</h2>
                    <p>Templatica is a membership based template club where you get
                    <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
                    <strong>annual fee of $24!</strong><br />
                    Yup, that's right! All of <a href="http://templatica.com/templates" title="CSS templates">this</a> plus <strong>all of the
                    templates released within one year from the day you join</strong>. No extra cost, no hidden fees!<br />       
                    You also have a possibility of purchasing a <strong>single template for as low as $5</strong>.</p>
                </li>
                <li>
                    <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>.
                    <a href="http://templatica.com/templates">Templates</a> are not only meant for commercial but for
                    <strong>educational purpose as well</strong>. I would like you to <a href="http://templatica.com/join">join</a>,
                    download templates, analyze the code and hopefully learn something new. <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>
                    <h2>What Templatica offers</h2>   
                    <p>Templatica offers static design templates with <strong>valid XHTML and CSS</strong>.
                    All templates are tested in<strong> Firefox Win, IE7, IE6, Opera</strong> on Windows
                    as well as <strong>Safari and Firefox</strong> on Mac. <br />
                    Templates are <strong>highly customizable</strong>. The download package for each template
                    includes HTML, CSS, JavaScript files and related images.</p>
                </li>   
            </ul>
        </div>       
           
       
       
       
    </div>

</div>


Saludos!! Espero sea De Su Agrado


Ultima edición por backcome el Jue Abr 08, 2010 10:35 am; editado 2 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group