* { 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; }

///////// //頁(yè)面滑動(dòng) // ///////// /** * [Swipe description] * @param {[type]} container [頁(yè)面容器節(jié)點(diǎn)] * @param {[type]} options [參數(shù)] */ function Swipe(container) { //獲取第一個(gè)子節(jié)點(diǎn) var element = container.find(":first"); //滑動(dòng)對(duì)象 var swipe = {}; //li頁(yè)面數(shù)量 var slides = element.find("li"); //獲取容器尺寸 var width = container.width(); var height = container.height(); //設(shè)置li頁(yè)面總寬度 element.css({ width: (slides.length * width) + 'px', height: height + 'px' }); //設(shè)置每一個(gè)頁(yè)面li的寬度 $.each(slides, function(index) { var slide = slides.eq(index); //獲取到每一個(gè)li元素 slide.css({ width: width + 'px', height: height + 'px' }); }); //監(jiān)控完成與移動(dòng) swipe.scrollTo = function(x, speed) { //執(zhí)行動(dòng)畫(huà)移動(dòng) element.css({ 'transition-timing-function' : 'linear', 'transition-duration' : speed + 'ms', 'transform' : 'translate3d(-' + x + 'px,0px,0px)' }); return this; }; return swipe; }