XSwitch是一款jQuery全屏滚动插件。XSwitch可以高度自定义,生成通过鼠标滚动全屏翻页的效果。
使用方法
在页面最后引入jquery和XSwitch.min.js文件。
<script src="js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/XSwitch.min.js"></script>
HTML结构
基本的HTML结构如下。
<!-- 插件基本结构 --> <div id="container"> <div class="sections"> <div class="section" id="section0"></div> <div class="section" id="section1"></div> <div class="section" id="section2"></div> <div class="section" id="section3"></div> </div> </div>
CSS样式
然后添加一些基础的样式支持。
/*简单reset*/ * { margin: 0; padding: 0; } /*必须,关系到单个page能否全屏显示*/ html, body { height: 100%; overflow: hidden; } #container, .sections, .section { /*必须,兼容,在浏览器不支持transform属性时,通过改变top/left完成滑动动画*/ position: relative; /*必须,关系到单个page能否全屏显示*/ height: 100%; } .section { /*有背景图时必须,关系到背景图能否全屏显示*/ background-color: #000; background-size: cover; background-position: 50% 50%; } /*非必需,只是用来设置背景图,id不会被插件用到*/ #section0 { background-image: url(img/img1.jpg); } #section1 { background-image: url(img/img2.jpg); } #section2 { background-image: url(img/img3.jpg); } #section3 { background-image: url(img/img4.jpg); } /*以下样式用来设置slider样式,可自行修改*/ .pages { position:fixed; right: 10px; top: 50%; list-style: none; } .pages li { width: 8px; height: 8px; border-radius: 50%; background: #fff; margin: 15px 0 0 7px; } .pages li.active { margin-left: 0; width: 14px; height: 14px; border: 4px solid #FFFFFF; background: none; }
初始化插件
有两种调用插件的方法:
方法一: 通过给div#container
添加属性data-XSwitch
调用,插件将会使用默认配置,如:
<div id="container" data-XSwitch> ... </div>
方法二 :通过js调用,使用这种方法可设置参数。
$('#container').XSwitch({ direction: 'horizontal' });
使用方法
XSwitch插件配置参数如下:
/*默认配置*/ { selectors: { sections: '.sections', //容器类名 section: '.section', //子容器类名,即每个单页 page: '.pages', //slider类名 插件会生成一个ul侧边栏 active: '.active' //被选中的slider下li的类名 }, index: 0, //起始页下标 easing: 'ease', //动画类型,支持transition所有类型 duration: 500, //动画执行时间 单位毫秒 loop: false, //是否支持循环滑动 pagination: true, //是否分页 keyboard: true, //是否支持键盘滚动事件 direction: 'vertical', //滑动方向 默认为垂直 设置为 horizontal 将水平滑动 callback: '' //滑动完成后的回调函数 }
该jQuery全屏滚动插件的github网址为:https://github.com/XxinLiang/XSwitch
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!