JQuery анимация слайдер миниатюр

Question

Я пытаюсь создать слайдер миниатюр (не уверен, что это имя) точно так же, как this , но я застрял, так как я не очень хорош в API анимации jquery.пока у меня есть этот код: http://jsfiddle.net/bingjie2680/mwxzT/13/,, но он не работает ожидаемым образом, может кто-нибудь, пожалуйста, помогите мне с этим, или дайте мне несколько советов или ссылок на учебные пособия о том, как его реализовать.Я искал в Интернете, не мог найти что-нибудь актуальноеспасибо за чтение.

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

Answer 1

Вам нравится этот? :)

ГАЛЕРЕЯ ГАЛЕРЕЯ МОЗУМЕСТА

HTML:

<div id="mmGallery_container">   
    <div id="mmGallery">
        <img src="image1.jpg" style="height:<!--set first image height-->px;"/>
        <img src="image.jpg"/>
        <img src="image.jpg"/>
        <img src="image.jpg"/>
        <img src="image.jpg"/>
    </div>  
</div>

CSS:

/* ***** mmGallery ***** */   
#mmGallery_container{
    position:relative;
    top:30px;
    z-index:0;
    margin:20px auto;
    /*height: 200px; will be handled by jQuery */
    width:560px;   /*  SET WIDTH!  */
    overflow:hidden;
    -moz-box-shadow:     5px 8px 50px #000;
    -webkit-box-shadow: 5px 8px 50px #000;
    box-shadow:         5px 8px 50px #000;
    border:12px solid #000;
    background:#000;
}
#mmGallery{
    cursor:col-resize;
    position:relative;
}
#mmGallery img{
    position:relative;
    float:left;
}

JQuery:

$(function(){
    // roXon mmGallery

    //####### SETUP SPEED ######//
    mmGalSpeed = 20;              // higher number = slower movements
    //##########################//

    var setHeight = $('#mmGallery img:eq(0)').height();
    $('#mmGallery_container').css({ height: setHeight });

});
$(window).load(function(){
    /*________________mmGallery _________________*/

    sumW = 0;   
    imgH = 0;
    imgH = $('#mmGallery img:eq(0)').height(); 
    $('#mmGallery img').css({ height: imgH });    
    $('#mmGallery_container').css({ height: imgH });

    $('#mmGallery img').each(function(){
        sumW += $(this).width();
        $('#mmGallery').width(sumW);
    });    

    wDiff1 = $('#mmGallery_container').outerWidth(true);
    wDiff2 = $('#mmGallery').width();
    wDiff = (wDiff2/wDiff1)-1;  
    mouseX = 0;
    $("#mmGallery_container").mousemove(function(e) {
    mouseX = (e.pageX - this.offsetLeft);      
    });

    var xSlider = $("#mmGallery");
    var posXdec = 0;
    setInterval(function(){     
        posXdec += (mouseX - posXdec) / mmGalSpeed;
        posX = posXdec;

        xSlider.css({marginLeft:  '-'+ (posX * wDiff) +'px' }); // instead 'marginLeft' use 'left' for absolute pos. #mmGallery
    }, 10);

});