slider

slide jquery

by cristian_cena

HTML

<div class="wrap">
    <div id="slider">
        <ul id="slider-list">
            <li class="actual"><img src="http://1.bp.blogspot.com/_1vKnHdXrfQc/TQqNNzlrS0I/AAAAAAAAADY/6tecyjZEHBc/s1600/bellezas-vivas-el-color-de-las-aves-_imagenGrande.jpg" alt="tucán"/></li>
            <li><img src="http://www.forodefotos.com/attachments/fotos-de-aves/20577d1305651101-aves-exoticas-aves-exoticas-volando-guacamayo.jpg" alt="papagayo"/></li>
            <li><img src="http://1001fondosgratis.com/imagenes/aves/aves-zx-7g.jpg" alt="aguila"/></li>
        </ul>
        <div id="slider-console">
            <a id="prev" href="">prev</a>
            <div id="slider-pages"></div>
            <a id="next" href="">next</a>
            <span> | </span>
            <a id="play" href="">play</a>
        </div>    
    </div>    
</div>

CSS

*{ 
    margin: 0; padding: 0;
}
html, body{
    width:  100%;
    height: 100%;
    overflow: hidden;
    background: whitesmoke;
}
ul li{
    list-style: none;
} 
.wrap{
    margin: 10% auto;
    width: 400px;
}
 
 
/***********************************/
 
img{
    width:  100%;
}
#slider-list{
overflow-y: hidden;
position: relative;     
}
#slider-list li {
    display: block;
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
}
 
#slider-console{
    display: inline-block;
    padding: 10px;
    background: yellowgreen;
}
#slider-pages{
    display: inline-block;
}
 
/***********/
 
#prev {}
#next {}
 
/***********/
 
#slider-list .actual{
    z-index:1;
}
.nro_actual{
    background: yellow;
}

JavaScript

$(function(){
    //objeto slider
    var slider  = {
        id                  : "#slider",
        width       : 400,
        height      : 200,
        actual      : 0,
        wrap_list   : "#slider-list",
        wrap_pages  : "#slider-pages",
        li_number   : $("#slider-list").find("li").length,
        go          : function(where)
                    {
                        if (where == 'next'){
                            if(slider.actual < slider.li_number - 1){    
                               slider.actual = slider.actual * 1 + 1;  
                            }
                            else{     
                                slider.actual = 0;                                          
                            }
                        }
                        else if (where == 'prev'){
                            if(slider.actual > 0){   
                               slider.actual = slider.actual - 1;      
                            }
                            else{                                       
                                slider.actual = slider.li_number - 1;   
                            }
                        }
                        else{
                                slider.actual = where;
                        }
                        //$("#slider-list li").removeClass("actual");
                        var li = $("#slider-list").find("li"); 
                        var a  = $("#slider-pages").find("a");
                        $(li).removeClass("actual");
                        $(a).removeClass("nro_actual");

                        for (var i = 0; i < slider.li_number; i++)
                        {
                            if(i == slider.actual){
                                //alert(slider.actual);
                                $(li[i]).addClass("actual");
                                $(a[i]).addClass("nro_actual");
                            }
                        }
        ...