重新启动动画jquery和javascript

restart animation jquery and javascript

本文关键字：javascript jquery 动画重新启动更新时间：2023-09-26

嗨，我正在创建一个jquery滑块，当时间（在setInterval中）结束时，我遇到了重新启动滑块的问题。当3张图像滑动，最后一张显示动画时，动画保持不变，但我想重新开始第一张图像，然后再次开始循环。有人能帮我吗？谢谢

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

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);
        }
    }