强力推荐一款强大布局插件-FERROSLIDER

所属分类:UI-布局

 43252  336  查看评论 (0)
分享到微信朋友圈
X
强力推荐一款强大布局插件-FERROSLIDER ie兼容8


使用步骤

1、引入以下的js和css文件(请以实际的demo效果为准)

<link rel="stylesheet" href="query.ferro.ferroSlider.css" type="text/css">
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.ferro.ferroSlider-1.2.min.js" type="text/javascript"></script>

2、在head标签中加入以下js代码(请以实际的demo效果为准)

<script type="text/javascript">
    $(document).ready(function () {
        $('.slidingSpaces').ferroSlider();
    });
</script>

3、在body标签中加入以下格式的html代码

<div id="div1" class="slidingSpaces" title="Page 1" style="background-color:red">    first page</div><div id="div2" class="slidingSpaces" title="Page 2" style="background-color:aqua">    second page </div><div id="div3" class="slidingSpaces" title="Page 3">    third page  </div><div id="div4" class="slidingSpaces" title="Page 4">    fourth page </div><div id="div5" class="slidingSpaces" title="Page 5">    fifth page  
</div>

参数配置

参数名 参数说明 可选值 默认值
ajaxLoading 是否用ajax加载内容 true | false false
ajaxScript ajax脚本的路径 字符串 ”
autoSlide 是否自动滑动 true | false false
autoSlideTime 自动滑动时间间隔 数字 5000
axis 过渡方向 ‘xy’ 或 ‘yx’ ”
backGroundImageClass 背景图片路径 字符串 ”
container 滑动内容的容器标签 字符串 ‘none’ 即为
createMap 是否创建导航地图 true | false false
createPlayer 是否创建播放控制(播放/暂停) true | false false
createSensibleAreas 是否在滑动边缘创建敏感区域,当鼠标移动到边缘的时候将会显示 true | false false
createTimeBar 是否创建时间条 true | false false
displace 内容的位移模式 ‘row’ | ‘column’ ‘row’
easing 过渡效果 linear’ | ‘swing’ | 其它的jquery效果 ‘linear’
feedbackArrows 是否在过渡时显示一张用以标记过渡方向的图片 true | false false
fullScreenBackground 是否将所有标记为背景图片的图片设为背景 true | false false
linkClass 每一个具有该样式名的链接将会过渡到该链接指向的内容 连接的样式名 ”
mapPosition 导航地图的位置 ‘top_left’ | ‘top_center’ | ‘top_right’ | ‘bottom_right’ | ‘bottom_center’ | ‘bottom_left’ | ‘center_right’ | ‘center_left’ | ‘center_center’ ‘bottom_right’
playerPosition 播放控制的位置 ‘top_left’ | ‘top_center’ | ‘top_right’ | ‘bottom_right’ | ‘bottom_center’ | ‘bottom_left’ ‘bottom_center’
playerTheme 播放控制的主题。 ‘light’表示白色图标黑色阴影,’dark’代表黑色图标白色阴影 ‘light’ | ‘dark’ ‘light’
preventArrowNavigation 是否禁止键盘导航 true | false false
preloadBackgroundImages 是否预加载背景图片 true | false false
time 过渡的毫秒时间 整数 300
tips 是否用工具提示渲染地图标题属性 true | false false

tipsPosition 工具提示相对于导航点的位置 ‘top’ | ‘right’ | ‘left’ | ‘bottom’ ‘top’

相关插件-布局

不错的保安类网站模板

不错的bootstrap自适应网站模板
  布局
 37313  466

sefolio透明风格的单页网站模板

透明风格的单页网站模板
  布局
 39810  537

angualrjs 前端框架

一款可以使用各种插件的angularjs 前端框架
  布局
 42354  538

jQuery Bootstrap响应式网站模板

jQuery Bootstrap响应式web app网站模板
  布局
 19015  293

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复