Как я могу вернуться к оригинальному изображению с помощью JQuery

Question

У меня есть ползунок jQuery с двумя изображениями, я бы хотел, чтобы первое изображение было назад, так что оно находится в постоянном цикле.

У меня есть ссылка на ручку здесь https://codepen.io/emilychews/pen/ENbbqW

Мой код:

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

}); 

Я поставил его так, оригинальный слайд идет назад к первому изображению с margin-left: 0, но я не могу разобраться, чтобы получить t его случиться так, чтобы он анимировал справа. В тот момент, когда slide2 попадает в положение slide1, сразу появляется сразу без 3-секундной задержки функции setInterval() или самой анимации.

Любая помощь была бы потрясающей.

Emily.

Answer 1

Существует два способа сделать бесконечный слайдер.

Во-первых,, когда показанный один поверните налево и исчезнет, ​​вы должны добавить его к родительскому узлу.

Но таким образом, вы должны держать .slides достаточно ширины, чтобы держать больше ли (ли) при проскальзывании.

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

По этому пути, вы могли понять мой sloution, но код может быть немного некрасиво, поэтому я дам вам следующий план.

Во-вторых,, просто используйте ли (ы), чтобы вы были бесконечным слайдером.

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

Что делать только, когда анимация закончена:

1. сделать disapper в левой один к хвосту родителя.
2. затем сделать margin-left: 0 родителя

так это выглядит, как петля держит бесконечно.

Но позаботьтесь:

В функции обратного вызова .animate(), вы должны использовать $('.slide') для slide, что ранее сохраненной. Поскольку селектор jQuery в памяти будет отличаться от истины.

Вот полный код:

$(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

Вы можете проверить это обновление, он будет делать свою работу, и я добавил еще один слайд, чтобы проверить решение на многих слайдах

Есть два способа перемещения к первому слайду, я выделил оба пути в коде

$(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>