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();
}); });

jQuery滚屏插件XSwitch.js的更多相关文章

  1. jquery多级手风琴插件–accordion.js

    手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...

  2. jQuery时间格式插件-moment.js的使用

    jQuery时间格式插件-moment.js的使用 moment.js插件的使用,使用之前在页面引入对应的js文件: 详细的操作可见moment中文官网:http://momentjs.cn/ 日期格 ...

  3. 【jQuery插件】pagepiling滚屏插件使用

    pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现全屏滚动效果. 支持所有的主流浏览器,包括IE8+,支持移动设备.下面详细讲解下pagePiling.js的使用步骤. ...

  4. 简单的jquery进度条插件LineProgressbar.js,myProgress.js

    参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...

  5. jQuery全屏插件Textarea Fullscreen

    插件描述 Textarea Fullscreen是一个jquery插件,可以将textarea设置为全屏模式 使用方法 引用jquery.js,jquery.textareafullscreen.js ...

  6. Jquery datepicker 时间插件使用 js 时间相加,相减

    $(document).ready(function(){ //输入框事件 $('#probation').bind('input propertychange', function() { var ...

  7. jQuery时间轴插件timeline.js

    http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...

  8. jQuery图片剪裁插件Cropper.js的使用

    插件下载地址及文档说明 1.引入必要的js和css核心文件 <link rel="stylesheet" href="../css/cropper.css" ...

  9. 选择29部分有用jQuery应用程序插件(免费点数下载)

    免积分下载:http://download.csdn.net/detail/yangwei19680827/7238711 原文地址:http://www.cnblogs.com/sxwgf/p/36 ...

随机推荐

  1. Python3简单爬虫抓取网页图片

    现在网上有很多python2写的爬虫抓取网页图片的实例,但不适用新手(新手都使用python3环境,不兼容python2), 所以我用Python3的语法写了一个简单抓取网页图片的实例,希望能够帮助到 ...

  2. mac终端不好用?用brew神器代替

    一.概念 Brew是一款Mac OS平台下的软件包管理工具,拥有安装.卸载.更新.查看.搜索等很多实用的功能.简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径的情况,十分方便快捷. 官 ...

  3. 【一】php 基础知识

    1 php标记,<?php php代码 ?> 2 注释:代码的解释和说明 多行注释 /**/ 单行注释 //.# 3“.”连接符 echo "hello".date(& ...

  4. tarjan 缩点(模板)

    描述: 给定一个n个点m条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大.你只需要求出这个权值和. 注:允许多次经过一条边或者一个点,但是,重复经过的点,权值只计算一次. 思路: ...

  5. Java——String,StringBuffer,StringBuilder

    String 一经创建,不可更改,每次更改都是创建新对象,销毁旧对象 StringBuilder 创建后可修改,多线程不安全 StringBuffer 创建后可修改,多线程安全 StringBuffe ...

  6. eclipse创建web项目web.xml配置文件笔记

    1.使用eclipse创建web项目时,如果直接finish的话就没有默认生成web.xml配置文件,此时在你的项目下是看不到web.xml配置文件的,如果要查看的话可以如下操作: 右键你的项目,然后 ...

  7. 《剑指offer》第四十二题(连续子数组的最大和)

    // 面试题42:连续子数组的最大和 // 题目:输入一个整型数组,数组里有正数也有负数.数组中一个或连续的多个整 // 数组成一个子数组.求所有子数组的和的最大值.要求时间复杂度为O(n). #in ...

  8. 学习笔记30—Windows那些事

    1.win10编程窗口:powerShell 2.Win7设置工具栏折叠:我们只需要在底部任务栏空白位置点击鼠标右键,然后选择“属性”,在弹出额属性对话框中,将“任务栏按钮”后面的“始终合并.隐藏标签 ...

  9. vue.js环境配置步骤及npm run dev报错解决方案

    安装完成后,使用npm run dev 运行,成功后,就可以在浏览器中看到vue的欢迎画面了 最后一步可能报错,我就遇到这样的问题了, 个人问题仅供参考: ERROR Failed to compil ...

  10. Run keyword if

    Wait For Page Ready ${a} Run Keyword And Return Status Page Should Contain 新建 log ${a} Run Keyword I ...