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

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

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.