перезапустить анимацию jquery и javascript

Привет, я создаю слайдер jquery, и у меня возникли проблемы, чтобы восстановить слайдер, когда время (в setInterval) закончено. Когда 3 изображения скользят, а последний показывает, что анимация остается там, но я хочу вернуться к первому изображению и снова запустить цикл. Может кто-нибудь мне помочь? Спасибо!перезапустить анимацию jquery и javascript

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

источник

2015-11-30 Leonardo Silva

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

    }

источник

2015-11-30 18:46:37 void

К сожалению человек, но он по-прежнему не работает, ваш логический смысл, но я сейчас не почему это не работает, есть другой способ? И спасибо! –

перезапустить анимацию jquery и javascript

ответ

Смежные вопросы