* {
    padding: 0;
    margin: 0;
}
 
ul,
li {
    list-style-type: none;
}
/*主体部分*/
 
#content {
    width: 100%;
    height: 100%;
    /* top: 20%;
    left: 20%; */
    overflow: hidden;
    position: absolute;
}
 
.content-wrap {
    position: relative;
}
 
.content-wrap > li {
    background: #CAE1FF;
    color: red;
    float: left;
    overflow: hidden;
    position: relative;
}
 
li:nth-child(2) {
    background: #9BCD9B;
}
 
li:nth-child(3) {
    background: yellow;
}
 
button {
    width: 100px;
    height: 50px;
}
 
.button {
    position: absolute;
    bottom: 0;
}

/////////
//页面滑动 //
/////////
 
/**
 * [Swipe description]
 * @param {[type]} container [页面容器节点]
 * @param {[type]} options   [参数]
 */
function Swipe(container) {
    //获取第一个子节点
    var element = container.find(":first");
 
    //滑动对象
    var swipe = {};
 
    //li页面数量
    var slides = element.find("li");
 
    //获取容器尺寸
    var width = container.width();
    var height = container.height();
 
    //设置li页面总宽度
    element.css({
        width: (slides.length * width) + 'px',
        height: height + 'px'
    });
 
    //设置每一个页面li的宽度
    $.each(slides, function(index) {
        var slide = slides.eq(index); //获取到每一个li元素    
        slide.css({
            width: width + 'px',
            height: height + 'px'
        });
    });
 
    //监控完成与移动
    swipe.scrollTo = function(x, speed) {
        //执行动画移动
        element.css({
            'transition-timing-function' : 'linear',
            'transition-duration'        : speed + 'ms',
            'transform'                  : 'translate3d(-' + x + 'px,0px,0px)'
        });
        return this;
    };
 
    return swipe;
}