来自 Web前端 2020-04-29 17:43 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

AnySlider:适用于任何Html内容的jQuery Slider插件

5.使用默认选项调用插件

fullpage 插件基本使用


<link rel="stylesheet" href="jquery.fullPage.css" media="screen" title="no title" charset="utf-8">
<script src="jquery.js"></script>
<script src="jquery.fullPage.js"></script>
<script>
$(function(){
  $('#fullpage').fullpage({
    //这里是配置项
  });
})
</script>

<div id="fullpage">
  <div class="section" id="section-1">
      <div class="slide"> </div>
      <div class="slide"> </div>
  </div>
  <div class="section" id="section-2"></div>
  <div class="section" id="section-3"></div>
</div>

每滚动一屏,会给当前section加上 active class

所以我们可以写出类似下面这样的 scss 文件来操控动画

#section1{
  h1{
    /**/
  }
  h2{
    transition: /**/
  }
}
#section1.active{
  h1{
    animation:/**/
  }
  h2{
    /**/
  }
}

keyboard: true:允许使用向左和向右箭头键进行键盘导航。

cdn (content deliver network) 内容分发网络


如果百度使用了某个 cdn中的jquery.js,而且用户打开过百度, 我们自己同样使用了 同一个 cdn中的jquery.js, 用户打开我们的网页时使用浏览器缓存中的jquery.js.

例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.boot.com/jquery.js"></script>
    <script src="./js/index.js"></script>
  </head>
  <body>
  </body>
</html>

特征:重量轻,易于使用支持键盘导航使用淡入淡出或幻灯片过渡以及自定义缓动支持自动播放有很多选项可以自定义您自己的滑块基本用法:

主要功能有:

时间: 2019-09-08阅读: 224标签: 插件

插件配置项


  • sectionsColor

一个数组 规定了各个section的颜色

  • verticalCentered

每一页的内容是否垂直居中,默认值为true

  • resize

字体大小是否随窗口缩放而缩放 默认值为false

  • scrollingSpeed

滚动速度,默认为700毫秒

  • anchors

给每个section定义锚链接

  • lockAnchors

是否锁定锚链接

  • active class

默认显示哪个section

  • easing

定义页面section滚动的动画方式 设置这个值需要引入jquery.easings 插件

  • css3

默认为true,使用css3 transform 来实现页面滚动动画

  • loopTop

滚动到最顶部后是否连续滚动到底部,默认值为false

  • loopBottom

滚动到最底部后是否连续滚动回顶部 默认值为false

  • loopHorizontal

横向slide幻灯片是否循环滚动,默认值为true

  • autoScrolling

是否使用插件的滚动方式,默认值为true, 如果设置为false,则会出现浏览器自带的滚动条

  • scrollBar

是否包含滚动条,默认值为false 如果设置为true,则浏览器自带的滚动条出现 页面滚动时还是页滚动,但是滚动条的默认行为也效果

  • paddingTop paddingBottom

设置每一个section顶部和底部的padding,默认值为0 如果我们需要设置一个固定在顶部或者底部的菜单,导航,元素等,可以使用这两个配置项

  • fixedElements

普通方式书写的固定定位元素会被插件覆盖 需要我们通过指定这个属性才会生效,参数为一个jquery选择器

  • keyboardScrolling

是否可以使用键盘方向键导航,默认值为true

  • touchSensitivity

在移动设备中滑动页面的敏感性,默认为5,按百分比衡量,越大则越难滑动

  • continuousVertical

是否循环滚动,默认值为false,如果设置为true,则页面会循环滚动, 不像loopTop loopBottom那样出现跳动 这个属性和loopTop loopBottom 不兼容 不要同时设置

  • animateAnchor

锚链接是否可以控制滚动动画,默认为true。如果设置为false,则通过锚链接定位到某个页面显示不再有动画

  • recordHistory

是否记录历史,默认为true,可以记录页面滚动的地址 通过浏览器前进和后退按钮来导航

  • menu

绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认值为 false 可以设置为菜单的jquery选择器

<ul id="fullpageMenu">
  <li data-menuanchor="page1"><a href="#page1">1</a</li>
  .....
</ul>
  • navigation

是否显示导航,默认false 如果设置为true 会显示小圆点,作为导航

  • navigationPosition

导航小圆点位置,可以设置为left或者right

  • navigationTooltips

导航小圆点的tooltips设置,默认为[],按照顺序放置

  • showActiveTooltip

是否显示当前页面的导航的tooltip信息,默认为false

  • slidesNavigation

是否显示横向幻灯片的导航,默认值为false

  • slidesNavPosition

横向幻灯片导航的位置,默认为bottom 可以设置为top

  • controlArrows

定义是否通过箭头来控制slide幻灯片,默认值为true 在移动设备上可以通过滑动来操作幻灯片

  • scrollOverflow

内容超过满屏后是否显示滚动条,默认为false. 如果设置为true,则会显示滚动条 如果要滚动查看内容,还需要jquery.slimscroll插件,该插件主要用于模拟传统的浏览器滚动条

  • sectionSelector

section的选择器,默认为.section

  • slideSelector

slide的选择器 默认为.slide.

script src=""/script font/fontscript src="jquery.anyslider.js"/script

$.fn.fullpage 对象中的方法介绍


  • moveSectionUp()

  • moveSectionDown()

  $('#movedown').on('click',function(){
    $.fn.fullpage.moveSectionDown();
  })
  • moveTo(section,slide)

滚动到第几页,第几个幻灯片,注意,页面从1开始,而幻灯片从0开始

  • silentMoveTo(section,slide)

滚动到第几页,和moveTo一样,但是没有动画效果

  • moveSlideRight()

幻灯片向右滚动

  • moveSlideLeft()

幻灯片向左滚动

  • setAutoScrolling()

  • setLockAnchors()

  • setRecordHistory()

  • setScrollingSpeed()

  • setAllowScrolling(boolean,[directions])

添加或删除鼠标滚轮/滑动控制,第一个参数true为启用,false 为禁用 后面的参数为方向,取值包含 all,up,down,left,right,可以使用多个,逗号隔开

  • destory(type)

销毁fullpage特效,type可以不写,或者使用all,不写type,fullpage给页面添加的样式和html元素还在 如果使用all,则样式 html等全部销毁

  • reBuild()

重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果

END

我是俊英子(关注我)

追求自由 独立 简单 努力做一个热爱生活 珍惜生命的人

白天是个哼次哼次敲代码的程序猿,晚上是读书,健身,享受生活的自由者。

如果你喜欢我的文字和内容,关注我,一起加油 一起进步 不定期更文,我等你来哦!

easing: ‘swing‘:缓解选项。样式名称在jquery.easing.1.3.js里

我利用fullpage.js模仿百度舆情完成的全屏轮播网站网址https://xuanrandeyimojingjin.github.io/baiduyuqing
初学时的作品,谨供大家看一下效果,有兴趣的可以自己动手设计自己的全屏网站!

任何Slider都是一个易于使用且支持触摸的jQuery插件,允许您为任何html内容创建可自定义的滑块,如图像,文本,视频等。

jQuery插件


插件调用

<ul id="lunbo">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>
<script src="jquery.js"></script>
<script src="jqeury.lunbo.js"></script>
<script>
$('#lunbo').lunbo({
  //一些配置项
  time:40;
  step:function(){}
});
</script>

jQuery插件文件

(function($){
  var lunbo = function () {
    console.log(1);
  }
  $.fn.extend({
    lunbo:lunbo;
  })
})(jQuery)

afterSetup: function () {}:设置滑块后调用的函数。

如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,主要是动画,显得格外的高端大气上档次。
比如 iPhone 5C 的介绍页面(http://www.jq22.com/demo/fullpage141201214949/index8.html#page2
如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。

touch: true:是否启用在幻灯片之间滑动的功能。

配置项中的回调函数


  • afterLoad(anchorLink,index)

滚动到某一section,且滚动结束后,会触发一次此回调函数,函数接收 anchorLink 和index 两个参数, anchorLink 是锚链接的名称 index 是序号 从1开始计算 可以根据 anchorLink 和 index的参数值判断触发相应的事件

  • onLeave(index,nextIndex,direction)

离开一个section时触发,通过return false可以取消滚动 离开的序号 到达的序号 滚动的方向

  • afterRender()

页面结构生成之后的回调函数

  • afterResize()

浏览器窗口尺寸改变之后的回调函数

  • afterSlideLoad()

滚动到某一个幻灯片后的回调函数

  • onSlideLeave

离开一个slide之后的回调函数

showBullets: true:是否显示导航子弹。将此设置为false将阻止子弹被绘制。

插件描述:fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。

startSlide: 1:起始幻灯片的编号。

  • 支持鼠标滚动
  • 支持前进后退和键盘控制
  • 多个回调函数
  • 支持手机、平板触摸事件
  • 支持 CSS3 动画
  • 支持窗口缩放
  • 窗口缩放时自动调整
  • 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

pauseOnHover: true:在悬停时暂停自动播放

nextLabel: ‘Next slide‘:标签为下一个按钮。

$(document).ready(function () {font/font$(‘#slider‘).AnySlider();font/font});
div font/fontdiv  font/fontspan Content 1 /spanfont/fontsection Content2 /sectionfont/fontdiv Content 3/divfont/font/divfont/font/div

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:AnySlider:适用于任何Html内容的jQuery Slider插件

关键词: