Анимированная серия using uislider

Question

ive только что начал изучать jquery и im борется. Я пытаюсь создать автономную страницу, в которой включен uislider, который связывает серию изображений (кадров), поэтому при перетаскивании ползунка создается анимация. , Я хотел бы проверить локальную папку, если это возможно, и использовать все изображения в этой папке, как показано в списке изображений в html, так как будет более 200 изображений. Мне также хотелось бы, чтобы положение ползунка запоминалось между веб-страницами и обновлялось, так как я хотел бы иметь разные взгляды на одну и ту же анимацию.

любая помощь будет оценена

Answer 1

ниже работает, как это должно с помощью gsap, но мне нужно, чтобы реализовать способ сохранения состояния на обновления и между страницами?

<div id="wrapper"> 
    <div id="demoWrapper"> 
    <div id='image'> 
    <img src="" /> > 
    <img src="" /> 
    <img src="" />  
    </div> 

    <div id="sliderWrapper"> 
    <div id="slider"></div> 
    </div> 
    </div> 
    <div id="nav-bar"> 
    <button id="play">play</button> 
    <button id="pause">pause</button> 
    <button id="reverse">reverse</button> 
    <button id="restart">restart</button> 
    </div> 

    </div> 

    $(document).ready(function() { 

    var images = $('#image').children(), // images in the sequence 
    fps = 1, 
    duration = 1/fps; 

    var tl = new TimelineLite({ 

    onUpdate:updateSlider}) 
.staggerTo(images, 0, {position: 'static', visibility: 'visible' },  duration, 0) 
.staggerTo(images.not(images.last()), 0, {position: 'absolute',  visibility: 'hidden', immediateRender: false }, duration, duration) 
.set({}, {}, "+="+duration); 





$("#play").click(function() { 
//play() only plays forward from current position. If timeline has  finished, play() has nowhere to go. 
    //if the timeline is not done then play() or else restart() (restart always restarts from the beginning). 

    if(tl.progress() != 1){ 

    tl.play(); 
} else { 
tl.restart(); 
} 
}); 

$("#pause").click(function() { 
    tl.pause(); 
    }); 

$("#reverse").click(function() { 
    tl.reverse(); 
}); 



    $("#restart").click(function() { 
    tl.restart(); 
    });  


$("#slider").slider({ 
range: "max", 
min: 0, 
max: 100, 
    step:1, 
slide: function (event, ui) { 
tl.pause(); 
//adjust the timeline's progress() based on slider value 
tl.progress(ui.value/100); 

} 
}); 



function updateSlider() { 
$("#slider").slider("value", tl.progress() *100); 
} 
});