Javascript 代码笔内容滑块

Javascript 代码笔内容滑块,javascript,jquery,html,css,jquery-ui-slider,Javascript,Jquery,Html,Css,Jquery Ui Slider,我正试图创造类似的东西 有人知道jQuery插件在其中使用了什么类型的插件吗 这似乎很直截了当,我似乎无法理解。现在我用这个插件 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 除此之外,还有给定的js代码。 我的问题是,我似乎无法使它动画到另一页 谢谢你的回复 动画是通过css translate完成的,小脚本控制动画期间的行为,就是说

我正试图创造类似的东西

有人知道jQuery插件在其中使用了什么类型的插件吗

这似乎很直截了当,我似乎无法理解。现在我用这个插件

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
除此之外,还有给定的js代码。 我的问题是,我似乎无法使它动画到另一页


谢谢你的回复

动画是通过css translate完成的,小脚本控制动画期间的行为,就是说,没有使用插件

css:

JS:


没有插件只使用一个简单的脚本。这就是我的想法,我使用了JS文件,但我似乎仍然无法为它设置动画。你知道问题可能出在哪里吗?它根本不起作用
html {
  overflow-y: hidden;
}

html, body, #wrapper {
  height: 100%;
    width: 100%;
    margin: 0;
}

nav {
    position: fixed;
    z-index: 100;
}

.main-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#wrapper {
    position: absolute;
    top: 0;
    -webkit-transition: -webkit-transform 1.5s cubic-bezier(.8,0,.2,1);
}

.slide0 {-webkit-transform: translateY(0%);}
.slide1 {-webkit-transform: translateY(-100%);}
.slide2 {-webkit-transform: translateY(-200%);}
.slide3 {-webkit-transform: translateY(-300%);}
.slide4 {-webkit-transform: translateY(-400%);}
var slider = $('.slider'),
    wrapper = $('#wrapper'),
    animating = false,
    current = 0,
    lengthDiv = slider.length,
    delay = 1500;

slider.on('click', function(e){
    var anchor = $(this);
    if(!animating){
        animating = true;
        current = anchor.parent().index();
        wrapper.removeClass().addClass('slide'+current);
        setTimeout(function(){
            animating = false;
        }, delay);
        e.preventDefault();
    }
});

$(document).keydown(function(e){var key = e.keyCode;if(key == 38 || key == 40)e.preventDefault();});
$(document).keyup(function(e){
    if(!animating){
        var key = e.keyCode;
        if(key == 38 && current > 0){
            $(slider[current - 1]).trigger('click');
        }else if(key == 40 && current < lengthDiv - 1){
            $(slider[current + 1]).trigger('click');
        }
    }
});
$(document).mousewheel(function(e, deltaY){
    if(!animating){
        if(deltaY > 0 && current > 0){
            $(slider[current - 1]).trigger('click');
        }else if(deltaY < 0 && current < lengthDiv - 1){
            $(slider[current + 1]).trigger('click');
        }
    }
    return false;
});