Slider

gistfile1.txt

<!-- SLIDE -->
    <div class="destaques-slide" style="position:relative;">
        <div style="margin:0 auto; width:978px; position:relative;">
            <span style="position:absolute; left:0; top:35px;">
                <a href="#" onclick="slideLeft(); return false;"><img src="images/set-esq-home.png" /></a>
            </span>
            <span style="position:absolute; right:0; top:35px;">
                <a href="#" onclick="slideRight(); return false;"><img src="images/set-dir-home.png" /></a>
            </span>
        </div>

        <div class="sliderHome">
            <ul class="total">
                <li class="bg-slider1">xxxx</li>
                <li class="bg-slider2">xxx</li>
                <li class="bg-slider3">xxxx</li>
                <li class="bg-slider4">xxxx</li>            
            </ul>
        </div>        

    </div>
    <!--// SLIDE -->

slider.js

<!--slider-->
<script type="text/javascript">

            var tempoAnima = 5000;
            var timer = setInterval(function(){slideRight();}, tempoAnima);
       
                function slideLeft()
                {
                    window.clearInterval(timer);

                    var widthFull = $(".sliderHome").find("ul").find("li").width();
                    var totSlide = $(".sliderHome").find("ul").find('li').length;
                    var widthUl = totSlide * widthFull;
                    $(".sliderHome").find("ul").width(widthUl);    
                    var img = $("ul.total li:last").clone(); // copio o ultimo elemento
                    $("ul.total li:last").remove(); // removo ele
                    $("ul.total").prepend(img); // adiciono no começo da ul
                    $("ul.total").css({"marginLeft":"-"+widthFull+"px"}); // deixo a ul na posição dois no caso 600px q é o tamanho de cada elemento
                    $("ul.total").stop().animate({"marginLeft":"0"},500); // volto a ul pra posição incial fazendo o movimento de transição
                    timer = setInterval(function(){slideRight();}, tempoAnima);
                    
                }
                //});


                //ir
                //$("#dir").click(function(){// id do botão que vai fazer a ação
                function slideRight()
                {                    
                    window.clearInterval(timer);

                    var widthFull = $(".sliderHome").find("ul").find("li").width();
                    var totSlide = $(".sliderHome").find("ul").find('li').length;
                    var widthUl = totSlide * widthFull;
                    $(".sliderHome").find("ul").width(widthUl);
                    $("ul.total").stop().animate({"marginLeft":"-"+widthFull+""},500,function()
                    { // movimento a ul para a segunda posição
                        var img = $("ul.total li:first").clone(); // copio o primeiro elemento
                        $("ul.total li:first").remove(); // removo ele
                        $("ul.total").append(img); // adiciono no final da ul
                        $("ul.total").css({"marginLeft":"0px"}); // volto a ul pra posição inicial

                    });
                    timer = setInterval(function(){slideRight();}, tempoAnima);                    
                }
           
    </script>
<style type="text/css">
    .sliderHome{}
    .sliderHome ul li {float: left; margin: 0px; background-color: #ff00ff;}
    .sliderHome ul {overflow: hidden; height:422px;}
    .capa{margin: 0 auto;}
    .bg-slider1{height:422px; background: url(images/bg-slider1.gif) repeat-x;}
    .bg-slider2{height:422px; background: url(images/bg-slider2.gif) repeat-x;}
    .bg-slider3{height:422px; background: url(images/bg-slider3.gif) repeat-x;}
    .bg-slider4{height:422px; background: url(images/bg-slider4.gif) repeat-x;}
</style>