html,body {
height: 100%;
overflow: hidden;
}

h1 {
font-size: 2em;
font-weight: normal;
}

container,.section {

height: 100%;
position: relative;
}

section0,#section1,#section2,#section3 {

background-color: #000;
background-size: cover;
background-position: 50% 50%;
}

section0 {

background-color: #024BCE;
color: #fff;
text-shadow: 1px 1px 1px #333;
}

section1 {

color: #fff;
text-shadow: 1px 1px 1px #333;
background-color: #31B81D;
}

section2 {

background-color: #01B5F0;
color: #fff;
text-shadow: 1px 1px 1px #666;
}

section3 {

color: #008283;
background-color: #5D0FF1;
text-shadow: 1px 1px 1px #fff;
}

section4 {

color: #fff;
text-shadow: 1px 1px 1px #333;
background-color: #31B81D;
}

section5 {

background-color: #01B5F0;
color: #fff;
text-shadow: 1px 1px 1px #666;
}

section6 {

color: #008283;
background-color: #5D0FF1;
text-shadow: 1px 1px 1px #fff;
}

section7 {

color: #fff;
text-shadow: 1px 1px 1px #333;
background-color: #31B81D;
}

section8 {

background-color: #01B5F0;
color: #fff;
text-shadow: 1px 1px 1px #666;
}

section9 {

color: #008283;
background-color: #5D0FF1;
text-shadow: 1px 1px 1px #fff;
}
.intro {
position: absolute;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
/右侧导航/

pages {

position: fixed;
right: 10px;
top: 50%;
list-style: none;
}

pages li {

width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
margin: 0 0 10px 5px;
}

pages li.active {

width: 14px;
height: 14px;
border: 2px solid #FFFE00;
background: none;
margin-left: 0;
}

section0 .title {

-webkit-transform: translateX(-100%);/内容旋转/
transform: translateX(-100%);
-webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
animation: sectitle0 1s ease-in-out 100ms forwards; /滑入页面/
}
/为支持上述滑入特效写的/
@-webkit-keyframes
sectitle0 { 0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes
sectitle0 { 0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

显示分页 'loop': false,//是否循环 'keyboard': true,//是否支持键盘 'direction': 'vertical',//滑动的方向 horizontal,vertical,'onpageSwitch': function(pagenum) {} }; var win = $(window); var iIndex = 0; //当前section的索引 var arrElement = []; var canScroll = true; var container; var sections; var opts; var flag=false;

var SP = $.fn.switchPage = function(options) {
opts = $.extend({},defaults,options || {});
container = $(opts.container);
sections = container.find(opts.sections);
sections.each(function() {
arrElement.push($(this));
});
return this.each(function() {
if (opts.direction == 'horizontal') initLayout();
if (opts.pagination) initPagination();
})

}
//重置鼠标滚轮事件
$(document).on("mousewheel DOMMouseScroll",MouseWheelHandler);
function MouseWheelHandler(e) {
e.preventDefault();
var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
var delta = Math.max(-1,Math.min(1,value));
if (canScroll) {
if (delta < 0) {
SP.moveSectionDown();
} else {
SP.moveSectionUp();
}
}
return false;
}

//向上一张移
SP.moveSectionUp = function() {
if (iIndex) {
iIndex--;
} else if (opts.loop) {
iIndex = arrElement.length - 1;
}
scrollPage(arrElement[iIndex]);
}

//向下一张移
SP.moveSectionDown = function() {
if (iIndex < (arrElement.length - 1)) {
iIndex++
} else if (opts.loop) {
iIndex = 0;
}
scrollPage(arrElement[iIndex]);
}
//当设置横向移动时初始化横向页面
function initLayout() {
var width = (sections.length * 100) + '%',cellwidth = (100 / sections.length).toFixed(2) + '%';
// container.width(width).addClass('left');
container.width(width);
sections.width(cellwidth).addClass('left');
}

//导航条初始化 hovertree.com
function initPagination() {
var length = sections.length;
var pageHtml = '<ul id="pages"><li class="active" id="dot0">'
for (var i = 1; i < length; i++) pageHtml += '<li id="dot'+i+'">';
pageHtml += '';
$("body").append(pageHtml);
flag=true;
if(flag==true){
$("li").click(function(){
var liId = $(this).attr("id");
var arr = liId.split('_');
iIndex=arr[1];
scrollPage(arrElement[iIndex]);
});
}

}
/跳转到dot对应页面/
function clickDot(){

}

//移动页面
function scrollPage(element) {
var dest = element.position();
if (dest == void 0) return;
initEffects(dest,element);
}

function isSupportCss(property) {
var body = $('body')[0];
for (var i = 0; i < property.length; i++) {
if (property[i] in body.style) {
return true;
}
}
return false;
}

//移动页面的核心函数
function initEffects(dest,element) {
canScroll = false;
var translate = "";
if (opts.direction == 'horizontal') {
translate = '-' + dest.left + 'px,0px,0px';
} else {
translate = '0px,-' + dest.top + 'px,0px';
}
container.css({
'transform': "translate3d(" + translate + ")",'transition': "all " + opts.duration + "ms " + opts.easing
});
container.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend",function() {
canScroll = true;
});
element.addClass("active").siblings().removeClass('active');
if (opts.pagination) {
paginationHandler();
}
}

//每次页面移动时，修改导航栏 何问起
function paginationHandler() {
var pages = $('#pages li');
pages.eq(iIndex).addClass('active').siblings().removeClass('active');
}

var resizeId;
win.resize(function() {
clearTimeout(resizeId);
resizeId = setTimeout(function(){
rebuild();
},500);
});

function rebuild() {
var currentHeight = win.height();
var currentWidth = win.width();
var element = arrElement[iIndex];
if(opts.direction == "horizontal") {
var offsetLeft = element.offset().left;
if (Math.abs(offsetLeft) > (currentWidth/2) && iIndex < (arrElement.length - 1)){
iIndex++
}
}else {
var offsetTop = element.offset().top;
if (Math.abs(offsetTop) > (currentHeight/2) && iIndex < (arrElement.length - 1)){
iIndex++
}
}
var currentElement = arrElement[iIndex],dest = currentElement.position();
initEffects(dest,currentElement);
if(opts.pagination) paginationHandler();
}

})(jQuery);