Javascript 使用jQuery滚动显示div中图像的特定部分

我使用jQuery插件定制滚动条。我有一个div，其中包含一组图像，当div大小溢出时，我会将它们内联显示。它完成了，工作很好。现在我的要求是从第一个图像开始，显示第一个图像和第二个图像的一小部分，让用户知道还有更多的图像要看，然后当下一个滚动时，我想显示完整的第二个图像和第三个图像的躯体部分，诸如此类。我想以滑块方式显示图像。我希望你们能理解我的要求。这是我的代码块

    <div id="scrollbar1">
            <div class="scrollbar">
                <div class="track">
                    <div class="thumb">
                        <div class="end">
                        </div>
                    </div>
                </div>
            </div>
            <div class="viewport">
                <div class="overview">                
                    <img src="Comic.jpg" alt="" />
                    ...........
                    ...........`enter code here`
                </div>
            </div>
  </div>


$(document).ready(function() {
      $('.overview').niceScroll({
        autohidemode: 'false',     // Do not hide scrollbar when mouse out
        cursorborderradius: '5px', // Scroll cursor radius
        background: '#E5E9E7',     // The scrollbar rail color
        cursorwidth: '8px',       // Scroll cursor width
        cursorcolor: 'Green',     // Scroll cursor color
    cursorheight: '3px'         
      });


    nice = $(".overview").niceScroll();

    var _super = nice.getContentSize;
    nice.getContentSize = function() {      
      var page = _super.call(nice);
      page.h = nice.win.height();
      return page;
    }

    });

...........
在此处输入代码`
$（文档）.ready（函数（）{
$（'.overview'）.nicesroll({
autohidemode:'false'，//鼠标移出时不隐藏滚动条
cursorborderradius:'5px'，//滚动光标半径
背景：'#E5E9E7'，//滚动条轨道颜色
cursorwidth:'8px'，//滚动光标宽度
cursorcolor:'绿色'，//滚动光标颜色
光标高度：“3px”
});
nice=$（“.overview”）.nicesroll（）；
var\u super=nice.getContentSize；
nice.getContentSize=函数（）{
var page=_super.call（nice）；
page.h=nice.win.height（）；
返回页面；
}
});

你能创建一个像jsfiddle.net、jsbin.com这样的游乐场吗？@Ravimallya我很抱歉没有用简单的术语向你解释我的要求是什么，因为我确实无法解释，但是如果你转到这里，你可以看到旋转木马幻灯片，在那里你可以看到下一张图片的某些部分。我需要那种滚动功能，但不需要平滑滚动，即如果我第一次滚动第三幅图像和第四幅图像的某一部分。我希望你能得到它。据我所知，在nicescroll中没有像

endScroll（）

，

onScroll（）

等方法。因此，使用nicescroll无法实现您的期望。为什么你不尝试使用卡鲁弗雷塞尔本身？在哪里有很多定制选项来播放幻灯片？只是建议。