轻量级网页图片滚动展示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
- 轻量级网页图片滚动展示jquery插件FlexSlider(附下载)
- jquery.flexslider.js带左右箭头且带按钮可滚动的图片插件
- flexSlider 图片轮播插件的使用(附参数设置)
- 基于jQuery的内容滚动插件flexSlider.js
- 【示例代码】3D旋转图片立体展示jquery幻灯片插件(附源码)
- 图片 flexslider插件 各个参数
- jquery 图片滚动插件
- jQuery图片展示插件Galleria
- 一个轻量级的网页遮罩层jQuery插件
- 一个轻量级的网页遮罩层jQuery插件
- jquery插件整理篇(三)图片展示插件
- 上下滚动的jQuery图片展示
- 轻量级jQuery图片放大镜插件 - mlens
- jQuery FlexSlider插件的详细设置参数
- 关于jquery.flexslider-min.js插件
- jQuery FlexSlider滑动插件的使用
- jquery图片滚动插件marquee
- jquery图片滚动插件jcarousellite
- Unity自动打包思路
- Swift学习之二:注释与分号
- HTML 转义符
- 基于 SquashFS 构建 Linux 可读写文件系统
- 程序员生存定律--程序人生的出口
- 轻量级网页图片滚动展示jquery插件FlexSlider(附下载)
- Emmet(Zen Coding)官方文档 之二 缩写
- Python模块常用的几种安装方式
- 救基友3(三维BFS)
- Swift学习之三:整型与浮点型
- S3C2416裸机开发系列十八_音频驱动实现(1)
- ASP.NET缓存数据技巧三则
- 正则表达式匹配标点符号
- 程序员生存定律--那个是你的人生出口