Вдвиньте и выдвиньте одновременно

Я пытаюсь сделать слайдер, который меняет изображения с помощью мыши, нажимает на кнопку со стрелкой вправо, но у меня есть несколько пустых кадров. Я хочу, чтобы он был бесшовным. вот мои коды:

HTML:

<div id="img_slider">
 
 
 
 
 
 
</div>

и это css:

#img_slider{
 background:url(../images/preloader.gif)no-repeat center;
 background-color:rgba(253,251,187,.6);
 background-size:50px;
 overflow:hidden;
 z-index:2;
 height:500px;
}

.slide_img{
 display:none;
 width:100%;
 height:500px;
 z-index:1;
}

.slide_img:first-child{
 display:block;
}

и это javascript:

var count= 1;

function right(){ 
 count++;
 if(count>6){
 count=1; 
 }
 $(".item").css("background","#333");
 $("#item_"+count).css("background","#3AF71A");
 $(".slide_img").hide("slide",{direction:'right'},500);
 $("#img_"+count).delay(300).show("slide",{direction:'left'},500);

 if(count==6){
 count=0;
 }
}

любая помощь очень ценится. 0 :)

2 ответа

Вы должны сделать это так: http://jsfiddle.net/v7au9/9/

HTML

<div id="slider_container">
 <div id="img_slider">
 
 
 
 </div>
</div>

CSS

#slider_container {
 position: relative;
 overflow: hidden;
 width: 120px;
 height: 100px;
}

#img_slider {
 position: absolute;
 left: 0px;
 width: 99999px;
}

img {
 float: left;
}

JS

var count = 1;
var newLeft = 0;

$(document).ready(function() {

 var timer = setInterval(function() {

 newLeft = parseInt($('#img_slider').css('left')) - $('img').width();

 if(count == $('img').length){
 count = 0;
 newLeft = 0;
 }

 $('#img_slider').animate({
 left: newLeft
 });

 count++;

 }, 1000);

});


Используйте .promise() вместо .delay(), он будет ждать завершения анимации, прежде чем продолжить.

licensed under cc by-sa 3.0 with attribution.