自定义全屏分页插件

pageswitch.js

/*!
 * PageSwitch 1.0
 *
 */

(function($){
	"use strict";

	/*说明:获取浏览器前缀*/
	/*实现：判断某个元素的css样式中是否存在transition属性*/
	/*参数：dom元素*/
	/*返回值：boolean，有则返回浏览器样式前缀，否则返回false*/
	var _prefix = (function(temp){
		var aPrefix = ["webkit", "Moz", "o", "ms"],
			props = "";
		for(var i in aPrefix){
			props = aPrefix[i] + "Transition";
			if(temp.style[ props ] !== undefined){
				return "-"+aPrefix[i].toLowerCase()+"-";
			}
		}
		return false;
	})(document.createElement(PageSwitch));

	var PageSwitch = (function(){
		function PageSwitch(element, options){
			this.settings = $.extend(true, $.fn.PageSwitch.defaults, options||{});
			this.element = element;
			this.init();
		}

		PageSwitch.prototype = {
			/*说明：初始化插件*/
			/*实现：初始化dom结构，布局，分页及绑定事件*/
			init : function(){
				var me = this;
				me.selectors = me.settings.selectors;
				me.sections = me.element.find(me.selectors.sections);
				me.section = me.sections.find(me.selectors.section);

				me.direction = me.settings.direction == "vertical" ? true : false;
				me.pagesCount = me.pagesCount();
				me.index = (me.settings.index >= 0 && me.settings.index < me.pagesCount) ? me.settings.index : 0;

				me.canscroll = true;

				if(!me.direction || me.index){
					me._initLayout();
				}

				if(me.settings.pagination){
					me._initPaging();
				}

				me._initEvent();
			},
			/*说明：获取滑动页面数量*/
			pagesCount : function(){
				return this.section.length;
			},
			/*说明：获取滑动的宽度（横屏滑动）或高度（竖屏滑动）*/
			switchLength : function(){
				return this.direction == 1 ? this.element.height() : this.element.width();
			},
			/*说明：向前滑动即上一页*/
			prve : function(){
				var me = this;
				if(me.index > 0){
					me.index --;
				}else if(me.settings.loop){
					me.index = me.pagesCount - 1;
				}
				me._scrollPage();
			},
			/*说明：向后滑动即下一页*/
			next : function(){
				var me = this;
				if(me.index < me.pagesCount){
					me.index ++;
				}else if(me.settings.loop){
					me.index = 0;
				}
				me._scrollPage();
			},
			/*说明：主要针对横屏情况进行页面布局*/
			_initLayout : function(){
				var me = this;
				if(!me.direction){
					var width = (me.pagesCount * 100) + "%",
						cellWidth = (100 / me.pagesCount).toFixed(2) + "%";
					me.sections.width(width);
					me.section.width(cellWidth).css("float", "left");
				}
				if(me.index){
					me._scrollPage(true);
				}
			},
			/*说明：主要针对横屏情况进行页面布局*/
			_initPaging : function(){
				var me = this,
					pagesClass = me.selectors.page.substring(1);
				me.activeClass = me.selectors.active.substring(1);

				var pageHtml = "<ul class="+pagesClass+">";
				for(var i = 0 ; i < me.pagesCount; i++){
					pageHtml += "<li></li>";
				}
				me.element.append(pageHtml);
				var pages = me.element.find(me.selectors.page);
				me.pageItem = pages.find("li");
				me.pageItem.eq(me.index).addClass(me.activeClass);

				if(me.direction){
					pages.addClass("vertical");
				}else{
					pages.addClass("horizontal");
				}
			},
			/*说明：初始化插件事件*/
			_initEvent : function(){
				var me = this;
				/*绑定鼠标滚轮事件*/
				me.element.on("mousewheel DOMMouseScroll", function(e){
					e.preventDefault();
					var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
					if(me.canscroll){
						if(delta > 0 && (me.index && !me.settings.loop || me.settings.loop)){
							me.prve();
						}else if(delta < 0 && (me.index < (me.pagesCount-1) && !me.settings.loop || me.settings.loop)){
							me.next();
						}
					}
				});

				/*绑定分页click事件*/
				me.element.on("click", me.selectors.page + " li", function(){
					me.index = $(this).index();
					me._scrollPage();
				});

				if(me.settings.keyboard){
					$(window).keydown(function(e){
						var keyCode = e.keyCode;
						if(keyCode == 37 || keyCode == 38){
							me.prve();
						}else if(keyCode == 39 || keyCode == 40){
							me.next();
						}
					});
				}

				/*绑定窗口改变事件*/
				/*为了不频繁调用resize的回调方法，做了延迟*/
				var resizeId;
				$(window).resize(function(){
					clearTimeout(resizeId);
					resizeId = setTimeout(function(){
						var currentLength = me.switchLength();
						var offset = me.settings.direction ? me.section.eq(me.index).offset().top : me.section.eq(me.index).offset().left;
						if(Math.abs(offset) > currentLength/2 && me.index < (me.pagesCount - 1)){
							me.index ++;
						}
						if(me.index){
							me._scrollPage();
						}
					},500);
				});

				/*支持CSS3动画的浏览器，绑定transitionend事件(即在动画结束后调用起回调函数)*/
				if(_prefix){
					me.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function(){
						me.canscroll = true;
						if(me.settings.callback && $.type(me.settings.callback) === "function"){
							me.settings.callback();
						}
					})
				}
			},
			/*滑动动画*/
			_scrollPage : function(init){
				var me = this;
				var dest = me.section.eq(me.index).position();
				if(!dest) return;

				me.canscroll = false;
				if(_prefix){
					var translate = me.direction ? "translateY(-"+dest.top+"px)" : "translateX(-"+dest.left+"px)";
					me.sections.css(_prefix+"transition", "all " + me.settings.duration + "ms " + me.settings.easing);
					me.sections.css(_prefix+"transform" , translate);
				}else{
					var animateCss = me.direction ? {top : -dest.top} : {left : -dest.left};
					me.sections.animate(animateCss, me.settings.duration, function(){
						me.canscroll = true;
						if(me.settings.callback){
							me.settings.callback();
						}
					});
				}
				if(me.settings.pagination && !init){
					me.pageItem.eq(me.index).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);
				}
			}
		};
		return PageSwitch;
	})();

	$.fn.PageSwitch = function(options){
		return this.each(function(){
			var me = $(this),
				instance = me.data("PageSwitch");

			if(!instance){
				me.data("PageSwitch", (instance = new PageSwitch(me, options)));
			}

			if($.type(options) === "string") return instance[options]();
		});
	};

	$.fn.PageSwitch.defaults = {
		selectors : {
			sections : ".sections",
			section : ".section",
			page : ".pages",
			active : ".active",
		},
		index : 0,		//页面开始的索引
		easing : "ease",		//动画效果
		duration : 500,		//动画执行时间
		loop : false,		//是否循环切换
		pagination : true,		//是否进行分页
		keyboard : true,		//是否触发键盘事件
		direction : "vertical",		//滑动方向vertical,horizontal
		callback : ""		//回调函数
	};

	$(function(){
		$('[data-PageSwitch]').PageSwitch();
	});
})(jQuery);

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面切换</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			font-family: Arial,"Microsoft YaHei",sans-serif;
		}
		html,body{
			height: 100%;
			overflow: hidden;
		}
		#container,.sections,.section{
			height: 100%;
			position: relative;
		}
		#section0,
		#section1,
		#section2,
		#section3{
			background-color: #000;
			background-size: cover;
			background-position: 50% 50%;
		}
		#section0{
			background-image: url(images/1.jpg);
			color: #fff;
			text-shadow:1px 1px 1px #333;
		}
		#section1{
			color: #fff;
			text-shadow:1px 1px 1px #333;
			background-image: url(images/2.jpg);
		}
		#section2{
			background-image: url(images/3.jpg);
			color: #fff;
			text-shadow:1px 1px 1px #666;
		}
		#section3{
			color: #008283;
			background-image: url(images/4.jpg);
			text-shadow:1px 1px 1px #fff;
		}
		#section0 p{
			color: #F1FF00;
		}
		#section3 p{
			color: #00A3AF;
		}
		.left{
			float: left;
		}
		h1{
			font-size: 6em;
			font-weight: normal;
		}
		p{
			font-size: 2em;
			margin:0.5em 0 2em 0;
		}
		.intro{
			position: absolute;
			top: 50%;
			width: 100%;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
			text-align: center;
		}
		.pages{
			position:fixed;
			list-style: none;
		}
		.vertical.pages{
			right: 10px;
			top: 50%;
		}
		.horizontal.pages{
			left: 50%;
			bottom: 10px;
		}
		.pages li{
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: #fff;
			margin: 10px 5px;
			cursor: pointer;
		}
		.horizontal.pages li{
			display: inline-block;
			vertical-align: middle;
		}
		.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;
		}
		#section0 p{
			-webkit-transform: translateX(100%);
			transform: translateX(100%);
			-webkit-animation: sec0 1s ease-in-out 100ms forwards;
			animation: sec0 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);
			}
		}
		@-webkit-keyframes sec0{
			0%{
				-webkit-transform: translateX(100%);
				transform: translateX(100%);
			}
			100%{
				-webkit-transform: translateX(0);
				transform: translateX(0);
			}
		}
		@keyframes sec0{
			0%{
				-webkit-transform: translateX(100%);
				transform: translateX(100%);
			}
			100%{
				-webkit-transform: translateX(0);
				transform: translateX(0);
			}
		}
	</style>
</head>
<body>
	<div id="container" data-PageSwitch>
		<div class="sections">
			<div class="section active" id="section0">
				<div class="intro">
					<h1 class="title">switchPage</h1>
					<p>Create Beautiful Fullscreen Scrolling Websites</p>
				</div>
			</div>
			<div class="section" id="section1">
				<div class="intro">
					<h1 class="title">Example</h1>
					<p>HTML markup example to define 4 sections</p>
					<img src="images/example.png"/>
				</div>
			</div>
			<div class="section" id="section2">
				<div class="intro">
					<h1 class="title">Example</h1>
					<p>The plug-in configuration parameters</p>
					<img src="images/example2.png"/>
				</div>
			</div>
			<div class="section" id="section3">
				<div class="intro">
					<h1 class="title">THE END</h1>
					<p>Everything will be okay in the end. If it's not okay, it's not the end.</p>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="pageswitch.js"></script>
	<script type="text/javascript">
	$("#container").PageSwitch({
		direction : "horizontal"
	});
	</script>
</body>
</html>