滚动动画图像序列偏移

Question

我已经成功地在我的网站中实现了这个小提琴（http://jsfiddle.net/1oa9snj4/），但是我想要抵消它，所以它不是从零开始，而是例如在1000开始，在1400停止。你将如何实现此？

group BY

// THIS SETS UP THE INITIAL ARRAY VARIABLE
// Array of images to swap between
var images = [];

// THIS LOOKS AT THE DATA ATTRIBUTES IN THE load element AND GENERATES 
// THE IMAGE NAMES BASED ON A GIVEN RANGE 
// THEN PUSHES THEM INTO THE ARRAY
for (i = 1; i <= $('#load').attr('data-images'); i++) {
    images.push('http://static.kurtgeiger.com/media/content/kg/ss13/shoecarousel/shoe' + i + '.jpg');
}


// THIS TAKES EACH IMAGE NAME FROM THE ARRAY AND CREATES A CLUSTER OF
// PRELOADED HIDDEN IMAGES ON THE PAGE USING JQUERY
$(images).each(function () {
    $('<img />')[0].src = this;
});


var totalImages = images.length;

var pageHeight = $(document).height() - $(window).height();

// Work out how often we should change image (i.e. how far we scroll between changes)
var scrollInterval = Math.floor(pageHeight / totalImages);

var viewport = $(window),
    slowdown;
viewport.on('scroll', function () {
    // Which one should we show at this scroll point?
    i = Math.floor($(this).scrollTop() / scrollInterval);

    // Show the corresponding image from the array
    $('img').attr('src', images[i]);
    //$('b').text('Frame: ' + i);

    // IN THIS EXAMPLE WE WANT TO START OUR IMAGE SEQUENCE AT 160 AND ADVANCE TO THE NEXT IMAGE
    // AFTER WE SCROLL 20 PIXELS
    slowdown = Math.ceil(viewport.scrollTop() / 20);



    // THIS IS WHERE WE'RE SETTING OUR ACTIVE STATES FOR THE SIDE NAVIGATION BASED ON 
    // SLOWDOWN POSITION
    if (slowdown >= 1 && slowdown <= 100 || slowdown >= 300) {
        $('.box').removeClass('active');
        $('#front').addClass('active');
    } else if (slowdown >= 100 && slowdown <= 200) {
        $('.box').removeClass('active');
        $('#left').addClass('active');
    } else if (slowdown >= 201 && slowdown <= 299) {
        $('.box').removeClass('active');
        $('#back').addClass('active');
    }
});

img {
    position: absolute;
    top: 10px;
    left: 0;
}
body {
    height: 6000px;
}
#wrapper{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
#rotate {
    position:fixed;
    left:50%;
    top:50%;
    margin-left:-480px;
    margin-top:-270px;
    z-index:0;
}

#arrow {
    position:fixed;
    bottom:100px;
    left:50%;
    margin-left:-80px;
    width:160px;
    font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
    font-size:10px;
    overflow:visible;
    color:#999;
    text-align: center;
}
#arrow:after {
    content:"";
    border-left:1px solid #999;
    border-bottom:1px solid #999;
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    /* IE 9 */
    -webkit-transform:rotate(-45deg);
    /* Safari and Chrome */
    width:20px;
    height:20px;
    position:fixed;
    left:50%;
    margin-left:-10px;
    display:block;
}
ul {
    list-style:none;
    padding:0;
    margin:0;
    position:fixed;
    right:0;
    top:50%;
    width:200px;
    z-index:2;
}
.box {
    background:#333333;
    padding:10px;
    color:#ffffff;
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
    transition:all 1s;
    margin-left:75px;
}
.active {
    margin-left:0px;
}

提前谢谢你， 大卫