美文网首页让前端飞
jQuery页面滑动插件,支持全屏滚动和轮播图

jQuery页面滑动插件,支持全屏滚动和轮播图

作者: 骷髅不会笑丶 | 来源:发表于2017-08-11 20:14 被阅读0次

page-slide

jQuery页面滑动插件,可简单实现全屏滚动和轮播图效果,觉得不错可以star一下

源码地址: 源码地址


  • 插件默认参数

      direction: 'vertical', // 滑动方向,参数vertical,horizontal
      fullPage: true, // 是否是全屏滑动
      width: 500, // 全屏滑动设置为false,不是全屏滚动时,设置滑动宽度
      height: 500, // 全屏滑动设置为false,不是全屏滚动时,设置滑动高度
      autoSlide: false, // 是否自动滚动,自动滑动时鼠标放到页面上会停止滑动,移开会重新滑动
      loop: true, // 是否循环滚动,循环滚动时在最后一张会回滚到第一张
      delay: 3000, // 自动滚动间隔时间
      duration: 1000, // 滚动持续时间
      navigation: true, // 是否显示定位分页,分页导航样式可在CSS中设置,当前导航会获得类名`active`,导航样式请在CSS中设置
      navigationEvent: 'click', // 定位分页触发事件,如mouseover、click
      callback: function () {}, // 回调函数,默认传入参数index,方便判断当前页
    
  • 页面结构

      <!-- 目标div结构 -->
      <div>
          <div>
              <div>Page One</div>
              <div>Page Two</div>
              <div>Page Three</div>
          </div>
    
          <!-- 设置navigation设置为true,将会自动生成导航元素
          <ul>
              <li> 1 </li>
              <li> 2 </li>
              <li> 3 </li>
          </ul>
          -->
      <div>
    
  • demo演示

全屏滚动演示: https://huanghaibin91.github.io/Page-slide/demo/demo-fullpage

轮播图演示: https://huanghaibin91.github.io/Page-slide/demo/demo-carousel

回调函数演示: https://huanghaibin91.github.io/Page-slide/demo/demo-callback

相关文章

  • jQuery页面滑动插件,支持全屏滚动和轮播图

    page-slide jQuery页面滑动插件,可简单实现全屏滚动和轮播图效果,觉得不错可以star一下 源码地址...

  • jQuery相关插件

    jQuery全屏滚动插件fullPage.js jquery轮播图插件unslider

  • fullpage框架

    jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠...

  • jQuery插件开发

    一个jQuery插件框架模板 利用上面的模板开发一个轮播图插件 项目地址 说明 支持横屏/竖屏滑动 支持循环播放 ...

  • 05_jQuery_无缝滚动轮播效果插件封装

    使用 jQuery 封装一个无缝滚动轮播效果插件。 效果图: 在线预览:jQuery_LKMarqueeSlide...

  • 全屏滚动

    jquery.fullPage.js全屏滚动插件教程演示

  • BannerView-无限轮播图控件

    轮播图控件,封装ViewPager,支持无限循环轮播,支持三种常用页面特效,支持设置指示器,支持自动切换手动滑动和...

  • jquery全屏滚动插件fullpage中文文档

    今天给大家带来一款Jquery全屏滚动插件fullpage,这款插件可以非常方便快速的做一个全屏滚动高大上的网站,...

  • Fullpage 10.15

    Fullpage Fullpage.js是一个基于jQuery的插件,方便制作全屏网站,主要功能有: 支持鼠标滚动...

  • DEMO-企业网站

    企业网站 用 HTML+CSS+jQuery 做的一个企业网站前端页面。 使用的 jQuery 插件: 焦点图轮播...

网友评论

    本文标题:jQuery页面滑动插件,支持全屏滚动和轮播图

    本文链接:https://www.haomeiwen.com/subject/dhbrrxtx.html