基于jQuery的内容滚动插件flexSlider.js
2016-01-08 14:11
846 查看
描述:轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。
特性:
1)支持滑动和淡入淡出效果;
2)支持水平、垂直方向滑动;
3)支持键盘方向键控制;
4)支持触控滑动;
5)支持图文混排,支持各种html元素;
6)自适应屏幕尺寸;
7)可控制滑动单元个数;
8)更多选项设置和回调函数。
使用方法:
1)下载flexisel.js插件
2)引入js文件
4)HTML页面
5)JavaScript脚本
或
6)运行代码即可
特性:
1)支持滑动和淡入淡出效果;
2)支持水平、垂直方向滑动;
3)支持键盘方向键控制;
4)支持触控滑动;
5)支持图文混排,支持各种html元素;
6)自适应屏幕尺寸;
7)可控制滑动单元个数;
8)更多选项设置和回调函数。
使用方法:
1)下载flexisel.js插件
2)引入js文件
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>fullPageDemo</title> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.flexslider.js"></script> </head>3)引入CSS样式文件
<link href="css/flexslider.css" rel="stylesheet">
4)HTML页面
<section id="banner" class="slider2"> <div class="flexslider"> <ul class="slides"> <li> <div class="slider-info"> <img src="images/papers/ban.jpg" class="img-responsive" alt=""> </div> </li> <li> <div class="slider-info"> <img src="images/papers/ban1.jpg" class="img-responsive" alt=""> </div> </li> <li> <div class="slider-info"> <img src="images/papers/ban2.jpg" class="img-responsive" alt=""> </div> </li> </ul> </div> </section>
5)JavaScript脚本
$(function() { $(".flexslider").flexslider(); });
或
<script type="text/javascript"> $(function(){ SyntaxHighlighter.all(); }); $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", start: function(slider){ $('body').removeClass('loading'); } }); }); </script>注:可以根据参数配置,进行个性化设置。
6)运行代码即可
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- javascript实现10进制转为N进制数
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- java自动生成验证码插件-kaptcha
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)