Wie animiere ich mit JQuery wieder zu einem Originalbild

Question

Ich habe einen jQuery-Schieberegler mit zwei Bildern, ich möchte das erste Bild zurückschieben, so dass es auf einer permanenten Schleife ist.

Ich habe Verbindung zum Stift hier https://codepen.io/emilychews/pen/ENbbqW

Mein Code ist:

HTML

<div id="slider"> 
<ul class="slides"> 
    <li class="slide"><img src="images/img1.jpg" alt="slideone"></li> 
    <li class="slide"><img src="images/img2.jpg" alt="slidetwo"></li> 
</ul> 
</div> 

jQuery

$(document).ready(function(){ 

var slider = $('#slider'), 
    slides = $('#slider .slides'), 
    slide = $('.slide'), 
    currentSlide = 0; 

setInterval (function(){ 
$(slides).animate({'margin-left': '-=266.5px' }, 1000, function(){ 
     currentSlide++; 
      if (currentSlide === slides.length) { 
       currentSlide = 0; 
       slides.css('margin-left', 0); 
      } 
    }); 

}, 3000); 

}); 

ich gesetzt haben es so die ursprüngliche Dia geht zurück zum ersten Bild mit Rand links: 0, aber ich kann nicht trainieren, um t zu bekommen es ist so, dass es von rechts hereinkommt. In dem Moment, in dem slide2 in Position kommt, erscheint slide1 sofort ohne die Verzögerung von 3 Sekunden der setInterval() - Funktion oder der Animation selbst.

Jede Hilfe wäre genial.

Emily.

Answer 1

Es gibt zwei Möglichkeiten, einen unendlichen Schieberegler zu verwenden.

Zuerst, wenn die gezeigte links abbiegen und verschwinden, sollten Sie es an den übergeordneten Knoten anhängen.

Aber auf diese Weise sollten Sie .slides genug Breite halten, um mehr li (s) zu halten, wenn Zeit rutschen.

// CSS 
#slider .slides { 
    display: block; 
    height: 400px; 
    width: 1000000px; /*enough width to keep slides*/ 
    margin: 0; 
    padding: 0; 
} 
// JS 
setInterval (function(){ 
    $(slides).animate({'margin-left': '-=266.5px'}, 1000, function(){ 
    $('.slide').eq(currentSlide).clone().appendTo($('#slider .slides')) 
    // Maybe you need to give .slides new width here 
    currentSlide++ 
    }); 
}, 3000); 

Auf diese Weise könnte man meinen sloution verstehen, aber der Code vielleicht ein wenig hässlich, also werde ich Sie das nächste Plan geben.

Zweitens, verwenden Sie einfach die li (s) Sie bleiben infinite Slider.

// HTML 
// use .slide1 .slide2 be more clear 
<ul class="slides"> 
    <li class="slide slide1">1</li> 
    <li class="slide slide2">2</li> 
</ul> 
// CSS 
#slider .slides { 
    display: block; 
    height: 400px; 
    width: 566px; /*total width of both slides*/ 
    margin: 0; 
    padding: 0; 
} 
.slide1 { 
    background-color: red; 
    height: 400px; 
    width: 266.5px; 
} 
.slide2 { 
    background-color: blue; 
    height: 400px; 
    width: 266.5px; 
} 
// JS 
setInterval (function(){ 
    $(slides).animate({'margin-left': '-=266.5px'}, 1000, function(){ 
    $('.slide').eq(0).appendTo($('#slider .slides')) 
    $('#slider .slides').css('margin-left', 0) 
    }); 
}, 3000); 

Was ich tue nur, wenn die Animation beendet:

1. machen den disapper in linke an den Schwanz der Eltern.
2. dann machen margin-left: 0 des Mutter

so sieht es aus wie die Schleife unendlich hält.

Aber Vorsicht:

In der Callback-Funktion von .animate(), Sie $('.slide')-slide verwenden sollten, die Sie vor gespeichert. Weil der jQuery-Selektor im Speicher von der Wahrheit abweicht.

Hier wird der vollständige Code ist:

$(document).ready(function(){ 
 

 
var slider = $('#slider'), 
 
    slides = $('#slider .slides'), 
 
    slide = $('.slide'), 
 
    currentSlide = 0; 
 

 
setInterval (function(){ 
 
    $(slides).animate({'margin-left': '-=266.5px' }, 1000, function(){ 
 
    $('.slide').eq(0).appendTo($('#slider .slides')) 
 
    $(slides).css('margin-left', 0) 
 
    }); 
 

 
}, 3000); 
 

 
});

#slider { 
 
position: relative; 
 
height: 400px; 
 
width: 266.5px; 
 
overflow: hidden; /*hides overflow of child elements*/ 
 
margin-top: 100px; 
 
margin-bottom: 100px; 
 
margin-left: 100px; 
 
} 
 

 
#slider .slides { 
 
    display: block; 
 
    height: 400px; 
 
    width: 566px; /*total width of both slides*/ 
 
    margin: 0; 
 
    padding: 0;} 
 

 
#slider .slide { 
 
    list-style-type: none; 
 
    float: left; 
 
} 
 

 
.slide1 { 
 
background-color: red; 
 
height: 400px; 
 
width: 266.5px; 
 
} 
 
.slide2 { 
 
background-color: blue; 
 
height: 400px; 
 
width: 266.5px; 
 
}

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<body> 
 
<div id="slider"> 
 
    <ul class="slides"> 
 
     <li class="slide slide1">1</li> 
 
     <li class="slide slide2">2</li> 
 
    </ul> 
 
</div> 
 
</body>

Answer 2

Sie dieses Updates überprüfen kann, wird es die Arbeit tun, ich habe auch noch eine Folie hinzugefügt, die Lösung auf vielen Folien zu überprüfen

Es gibt zwei Möglichkeiten zur ersten Folie zu bewegen, habe ich beide Wege im Code hervorgehoben

$(document).ready(function(){ 
 

 
var slider = $('#slider'), 
 
    slides = $('#slider .slides'), 
 
    slide = $('.slide'), 
 
    currentSlide = 0; 
 

 
setInterval (function(){ 
 
    currentSlide=currentSlide+1; 
 
    if(currentSlide == slide.length) 
 
    { 
 
     currentSlide=0; 
 
     /* in case you want the first slide to just pop up un-comment this line 
 
     $(".slides").css('margin-left','0px'); */ 
 
     /* in case you want to scroll to the first slide use this */ 
 
     $(".slides").animate({'margin-left': '0px' }, 2000); 
 
    } 
 
    else 
 
    { 
 
     $(".slides").animate({'margin-left': '-=266.5px' }, 2000); 
 
    } 
 
    
 
    },3000); 
 
    
 
});

#slider { 
 
position: relative; 
 
height: 400px; 
 
width: 266.5px; 
 
overflow: hidden; /*hides overflow of child elements*/ 
 
margin-top: 100px; 
 
margin-bottom: 100px; 
 
margin-left: 100px; 
 
} 
 

 
.slides { 
 
    display: block; 
 
    height: 400px; 
 
    width: 799.5px; 
 
    margin: 0; 
 
    padding: 0;} 
 

 
.slide { 
 
    list-style-type: none; 
 
    float:left; 
 
} 
 

 
.slide:nth-child(1) { 
 
background-color: red; 
 
height: 400px; 
 
width: 266.5px; 
 
} 
 
.slide:nth-child(2) { 
 
background-color: blue; 
 
height: 400px; 
 
width: 266.5px; 
 
} 
 
.slide:nth-child(3) { 
 
background-color: green; 
 
height: 400px; 
 
width: 266.5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="slider"> 
 
    <ul class="slides"> 
 
     <li id="1" class="slide"><img src="images/img1.jpg" alt="slideone"></li> 
 
     <li id="2" class="slide"><img src="images/img2.jpg" alt="slidetwo"></li> 
 
     <li id="3" class="slide"><img src="images/img3.jpg" alt="slidethree"></li> 
 
    </ul> 
 
</div>