1、需要有基本的HTML结构
<div style="margin-top: 124px;" id="container" data-XSwitch>
<div class="sections">
<div class="main_about_product common_height section" ></div>
<div class="main_product_trait common_height section" ></div>
<div class="marin_system_show common_height section" ></div>
<div class="marin_system_show common_height section" ></div>
<div class="main_footer common_height section relative"></div>
</div>
</div>
2、引入需要的样式
@charset "UTF-8";
/*简单reset*/
* {
margin:;
padding:;
}
/*必须，关系到单个page能否全屏显示*/
html,
body {
height: 100%;
overflow: hidden;
}
/*以下样式用来设置slider样式，可自行修改*/
.pages {
display:none;
position:fixed;
right: 10px;
top: 49%;
list-style: none;
}
.pages li {
width: 8px;
height: 8px;
border-radius: 10%;
background: #2aff00;
margin: 8px 0px 0px 7px;
}
.pages li.active {
margin-left:;
width: 14px;
height: 14px;
border: 4px solid #2aff00;
background: none;
}
#container,.sections,.section {
/*必须，兼容，在浏览器不支持transform属性时，通过改变top/left完成滑动动画*/
position: relative;
/*必须，关系到单个page能否全屏显示*/
height: 100%;
}
.section {
/*有背景图时必须，关系到背景图能够全屏显示*/
background-size: cover;
background-position: 50% 50%;
}
3、引入滚屏插件XSwitch.js
(function ($) {
$.fn.XSwitch = function (options) {
return this.each(function () {
var _this = $(this),
instance = _this.data('XSwitch');
if (!instance) {
instance = new XSwitch(_this, options);
_this.data('XSwitch', instance);
}
if ($.type(options) === 'string') {
return instance[options]();
}
});
}
$.fn.XSwitch.defaults = {
selectors: {
sections: '.sections',
section: '.section',
page: '.pages',
active: '.active'
},
index: 0,
easing: 'ease',
duration: 500,
loop: false,
pagination: true,
keyboard: true,
direction: 'vertical',
callback: ''
}
var _prefix = (function (temp) {
var aPrefix = ['webkit', 'moz', 'o', 'ms'],
props = '';
for (var i = 0, len = aPrefix.length; i < len; i ++) {
props = aPrefix[i] + 'Transition';
if (temp.style[props] !== undefined) {
return '-' + aPrefix[i].toLowerCase() + '-';
}
return false;
}
})(document.createElement('div'));
var XSwitch = (function () {
function XSwitch(element, options) {
this.settings = $.extend(true, $.fn.XSwitch.defaults, options);
this.element = element;
this.init();
}
XSwitch.prototype = {
init: function () {
var _this = this;
this.selectors = this.settings.selectors;
this.sections = this.element.find(this.selectors.sections);
this.section = this.sections.find(this.selectors.section);
this.direction = this.settings.direction === 'vertical' ? true : false;
this.pagesCount = this.pagesCount();
this.index = (this.settings.index >=0 && this.settings.index < this.pagesCount) ? this.settings.index : 0;
this.canScroll = true;
if (!this.direction) {
_initLayout(_this);
}
if (this.settings.pagination) {
_initPaging(_this);
}
_initEvent(_this);
},
pagesCount: function () {
return this.section.size();
},
switchLength: function () {
return this.duration ? this.element.height() : this.element.width();
},
prve: function () {
var _this = this;
if (this.index > 0) {
this.index --;
} else if (this.settings.loop) {
this.index = this.pagesCount - 1;
}
_scrollPage(_this);
},
next: function () {
var _this = this;
if (this.index < this.pagesCount) {
this.index ++;
} else if (this.settings.loop) {
this.index = 0;
}
_scrollPage(_this);
}
};
function _initLayout(_this) {
var width = (_this.pagesCount * 100) + '%',
cellWidth = (100 / _this.pagesCount).toFixed(2) + '%';
_this.sections.width(width);
_this.section.width(cellWidth).css('float', 'left');
}
function _initPaging(_this) {
var pagesClass = _this.selectors.page.substring(1),
pageHtml = '<ul class="' + pagesClass + '">';
_this.activeClass = _this.selectors.active.substring(1);
for (var i = 0, len = _this.pagesCount; i < len; i ++) {
pageHtml += '<li></li>';
}
pageHtml += '</ul>';
_this.element.append(pageHtml);
var pages = _this.element.find(_this.selectors.page);
_this.pageItem = pages.find('li');
_this.pageItem.eq(_this.index).addClass(_this.activeClass);
if (_this.direction) {
pages.addClass('vertical');
} else {
pages.addClass('horizontal');
}
}
function _initEvent(_this) {
_this.element.on('click', _this.selectors.page + ' li', function () {
_this.index = $(this).index();
_scrollPage(_this);
});
_this.element.on('mousewheel DOMMouseScroll', function (e) {
if (!_this.canScroll) {
return;
}
var delta = -e.originalEvent.detail || -e.originalEvent.deltaY || e.originalEvent.wheelDelta;
if (delta > 0 && (_this.index && !_this.settings.loop || _this.settings.loop)) {
_this.prve();
} else if (delta < 0 && (_this.index < (_this.pagesCount - 1) && !_this.settings.loop || _this.settings.loop)) {
_this.next();
}
});
if (_this.settings.keyboard) {
$(window).on('keydown', function (e) {
var keyCode = e.keyCode;
if (keyCode === 37 || keyCode === 38) {
_this.prve();
} else if (keyCode === 39 || keyCode === 40) {
_this.next();
}
});
}
$(window).resize(function () {
var currentLength = _this.switchLength(),
offset = _this.settings.direction ? _this.section.eq(_this.index).offset().top : _this.section.eq(_this.index).offset().left;
if (Math.abs(offset) > currentLength / 2 && _this.index < (_this.pagesCount - 1)) {
_this.index ++;
}
if (_this.index) {
_scrollPage(_this);
}
});
if(index ==0){
_this.index = 0;
}else if(index == 1 || index == 2){
_this.index = index + 1;
}
_scrollPage(_this);
});
});
_this.sections.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function () {
_this.canScroll = true;
if (_this.settings.callback && type(_this.settings.callback) === 'function') {
_this.settings.callback();
}
});
}
function _scrollPage(_this) {
var dest = _this.section.eq(_this.index).position();
if (!dest) {
return;
}
_this.canScroll = false;
if (_prefix) {
_this.sections.css(_prefix + 'transition', 'all ' + _this.settings.duration + 'ms ' + _this.settings.easing);
var translate = _this.direction ? 'translateY(-' + dest.top + 'px)' : 'translateX(-' + dest.left + 'px)';
_this.sections.css(_prefix + 'transform', translate);
} else {
var animateCss = _this.direction ? {top: -dest.top} : {left: -dest.left};
_this.sections.animate(animateCss, _this.settings.duration, function () {
_this.canScroll = true;
if (_this.settings.callback && type(_this.settings.callback) === 'function') {
_this.settings.callback();
}
});
}
var screenIndex = _this.index;
if(screenIndex ==0){
$('.header_tab_content li:eq('+ (screenIndex)+')').addClass("textColor_blue bottom_line");
$('.header_tab_content li:eq('+ (screenIndex)+')').siblings().removeClass("textColor_blue bottom_line");
}else if(screenIndex == 1 || screenIndex == 2 || screenIndex == 3){
$('.header_tab_content li:eq('+ (screenIndex - 1)+')').addClass("textColor_blue bottom_line");
$('.header_tab_content li:eq('+ (screenIndex-1)+')').siblings().removeClass("textColor_blue bottom_line");
}
if (_this.settings.pagination) {
_this.pageItem.eq(_this.index).addClass(_this.activeClass).siblings('li').removeClass(_this.activeClass);
}
}
return XSwitch;
})();
})(jQuery);
$(function () {
$('[data-XSwitch]').XSwitch();
})
4、通过给div#container添加属性data-XSwitch调用，插件将会使用默认配置
5、若每个屏的高度刚好是整个屏幕高度，则不需要强制对每个屏幕设置高度。因为遇到的页面还有一个头部，使得高度没有沾满整个屏幕。需要手动给每个屏设置高度
$(document).ready(function() {
setCommonHgt();
});
/*设置每屏高度一致*/
function setCommonHgt() {
var windowHgt = $(document.body).outerHeight(true);
var headerHgt = $('.main_header').height();
var commonHgt = windowHgt - headerHgt;
$('.common_height').css('height', commonHgt);
}
$(function() {
// 添加监控页面窗口变化的方法
$(window).resize(function() {
location.reload();
setCommonHgt();
});
});