restart animation jquery and javascript

Question

Hi i'm creating a jquery slider and i'm having problems to restar the slider when the time(in the setInterval) is over. When the 3 images slide and the last one is showing the animation stays there, but i want to restart to the first image and start the loop again. Could someone help me? Thanks!

HTML

                        <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Slider Jquery Test</title>
    <link href="slider.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/slidertest.js"></script>
    </head>
    <body>
        <div id="container">
            <ul id="buttons" class="buttons">
                <li><a href="#"><img id="left_b" class="left_b" src="imagens/flechae.png" alt="Anterior" onMouseOver="this.src='imagens/flechaehover.png'" onMouseOut="this.src='imagens/flechae.png'"></a></li>
                <li><a href="#"><img id="right_b" class="right_b" src="imagens/flechad.png" alt="Proximo" onMouseOver="this.src='imagens/flechadhover.png'" onMouseOut="this.src='imagens/flechad.png'"></a></li>
            </ul>
            <ul id="gallery" class="gallery">
                <li><img id="1" class="images" src="imagens/imagem1.jpg" alt="Imagem 1"></li>
                <li><img id="2" class="images" src="imagens/imagem2.jpg" alt="Imagem 2"></li>
                <li><img id="3" class="images" src="imagens/imagem3.jpg" alt="Imagem 3"></li>      
            </ul>
        </div>
    </body>
    </html>

CSS

    @charset "utf-8";

    body{
        width: 100%;
        height: auto;   
    }

    #container {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        /*overflow: hidden;*/
    }

    .buttons {
        width: 100%;
        height: auto;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 1;
        display: none;
    }

    .buttons li {
        width: 100%;
        height: auto;
        position: relative;
        margin: 0;
        padding: 0;
    }
    .left_b {
        width: 20px;
        height: 80px;
        position: relative;
        float: left;
        margin-left: 30px;
        margin-top: 250px;
    }

    .right_b {
        width: 20px;
        height: 80px;
        position: relative;
        float: right;
        margin-right: 30px;
        margin-top: 250px;
    }

    .gallery {
        width: 100%;
        height: auto;
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
    }

    .gallery li {
        width: auto;
        height: auto;
        position: relative;
        float: left;
    }

    .images {
        width: 1200px;
        height: 720px;
        position: relative;
        float: left;
    }

JavaScript

$(function(){

slide();

// Slider

function slide()
{
    // Variables
    var interval = 0;
    var time = 3000;
    var seconds = 1000;
    var current_image = 1;
    var num_images = 0;
    var total_width = 0;
    var slide_left = "+=1200px";
    var slide_right = "-=1200px";
    var right_b = $(".right_b");
    var left_b = $(".left_b");
    var left = "margin-left";
    var width = "width";
    var gallery = $(".gallery");
    var galleryLi = $(".gallery li");
    var images = $(".images");
    var buttons_class = $(".buttons");
    var container = $("#container");

    // Calling functions
    imagesSize();
    hideButtons();
    animation();


    // Functions
    function animation()
    {
        if(current_image < num_images)
        {
            loop();
            clickRight();
            clickLeft();
        }
    }

    function hideButtons()
    {   
        container.hover(function(){
            buttons_class.fadeIn(); 
        }, function(){
            buttons_class.fadeOut();    
        });
    }

    function imagesSize()
    {
        galleryLi.each(function(){
            num_images++;
            total_width += 1200;    
        });
        gallery.css(width, total_width + "px");
    }

    function loop()
    {
        if(current_image >= 1){
            interval = setInterval(moveLeft, time);
        }
        else if(current_image === num_images){
            clearLoop();
            moveLeft();
        }
    }

    function clearLoop()
    {
        clearInterval(interval);
    }

    function moveLeft()
    {
        if(current_image < num_images){
            gallery.animate({left: slide_right}, seconds);
            current_image++;
        }
    }

    function clickRight()
    {
        right_b.click(function(){
            moveLeft();
            clearLoop();
            loop();
        }); 
    }

    function moveRight()
    {
        if(current_image > 1){
            gallery.animate({"margin-left": slide_left}, seconds);
            current_image--;
        }   
    }

    function clickLeft()
    {
        left_b.click(function(){
            moveRight();
            clearLoop();
            loop();
        }); 
    }


} // end of function slide

}); // End of main function

score 0 · Answer 1 · answered Nov 30 '15 at 18:46

0

function loop()
    {
        if(current_image >= 1){
            interval = setInterval(moveLeft, time);
        }
        else if(current_image === num_images){
            clearLoop(); // Clear the previous interval
            moveLeft();
            // Add these two lines after setTimeout to finish the animation.
            setTimeout(function(){
                current_image = 1;
                loop();
            }, seconds);
        }

    }

answered Nov 30 '15 at 18:46

void

36,090
8
62
107

Sorry man, but it's still not working, your logical makes sense, but i don't now why it doesn't work, there's any other way? And Thanks! – Leonardo Silva Nov 30 '15 at 18:59

restart animation jquery and javascript

1 Answers1