基于jQuery的内容滚动插件flexSlider.js

来源：互联网发布：免费的大数据分析平台编辑：程序博客网时间：2024/04/27 13:08

描述：轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。

特性：

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）运行代码即可

0 0