Question

我正在尝试构建一个与this完全相同的缩略图滑块（不确定它是名称），但我因为我不擅长jquery动画API而陷入困境。到目前为止我有这个代码： http://jsfiddle.net/bingjie2680/mwxzT/13/，但预计不能正常工作，有人可以帮助我，或者给我一些指导或链接到如何实现它的教程。我在互联网上搜索过，找不到任何相关内容。谢谢你的阅读。

更新问题是当红色框滑动时，它不顺畅，红色框的左侧不应该移动到黑框内。始终将左侧和右侧与黑匣子对齐。

Answer 1

你喜欢这个吗？：）

MOUSEMOVE GALLERY SLIDER

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

});

Jquery动画缩略图滑块

1 个答案: