轻量级网页图片滚动展示jquery插件FlexSlider(附下载)

来源:互联网 发布:cocos2dx js 环境搭建 编辑:程序博客网 时间:2024/03/29 22:59

由于初学网页编程,接了一个项目需要首页进行图片滚动,于是找了这个插件,刚开始根据flexslider推荐的官方配置使用了一下,图片一直显示不出来。经过一番折腾,终于可以了,使用教程以及flexslider下载如下。

首先在html首部声明flexslider所需要的包,flexsider完整插件可以在我的网盘里面下载,网盘地址:http://pan.baidu.com/s/1qWrxm1Y,

<link rel="stylesheet" href="flexslider.css" type="text/css"><script src="jquery.min.js"></script><script src="jquery.flexslider.js"></script>

另外需要在项目中导入flexslider的fonts文件夹,里面包含了该插件的图标文件,如左右翻页图标



然后用js加载这个插件,其中.flexslider必须和所要显示的div的class名相同,里面有一些属性如animation等这里不做详细解释,大家意会即可。

<script type="text/javascript" charset="utf-8">$(window).load(function() {$(.flexslider).flexslider({animation : "fade",controlsContainer : ".flex-container",controlNav : false,slideshowSpeed : 5000});});</script>

以下是body内的图片滚动展示区域

<div class="<span style="color:#ff0000;">flexslider</span>"><span style="white-space:pre"></span><ul class="slides"><span style="white-space:pre"></span><li><img src="images/1.jpg" /></li><span style="white-space:pre"></span><li><img src="images/2.jpg" /></li></ul></div>


贴出一张效果图




0 0
原创粉丝点击