php 轮播图插件下载,jquery全屏响应式轮播图插件jquery.flexslider.js
在zblogPHP主题 yunduan 上使用这个轮播幻灯片插件jquery.flexslider.js,分享下使用方法:
这是一款jquery全屏响应式淡入淡出效果轮播图插件。该轮播图插件简单实用,兼容ie8浏览器,可以自动切换播放,带淡入淡出的动画效果。
FlexSlider - FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果。适合所有初级和高级网页设计师使用。不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看!$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade", //String: Select your animation type, "fade" or "slide"图片变换方式:淡入淡出或者滑动
slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"图片设置为滑动式时的滑动方向:左右或者上下
slideshow: true, //Boolean: Animate slider automatically 载入页面时,是否自动播放
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds 自动播放速度毫秒
animationDuration: 600, //Integer: Set the speed of animations, in milliseconds动画淡入淡出效果延时
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)是否显示左右控制按钮
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage是否显示控制菜单
keyboardNav: true, //Boolean: Allow slider navigating via keyboard left/right keys键盘左右方向键控制图片滑动
mousewheel: false, //Boolean: Allow slider navigating via mousewheel鼠标滚轮控制制图片滑动
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
playText: 'Play', //String: Set the text for the "play" pausePlay item
randomize: false, //Boolean: Randomize slide order 是否随即幻灯片
slideToStart: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)初始化第一次显示图片位置
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end 是否循环滚动
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.自定义控制导航
manualControlEvent:"", //String:自定义导航控制触发事件:默认是click,可以设定hover
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
});
});
js下载:
HTML:html>
jquery全屏响应式淡入淡出效果轮播图插件
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* flexslider */
.flexslider{position:relative;height:400px;overflow:hidden;background:url(images/loading.gif) 50% no-repeat;}
.slides{position:relative;z-index:1;}
.slides li{height:400px;}
.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center;}
.flex-control-nav li{display:inline-block;width:14px;height:14px;margin:0 5px;*display:inline;zoom:1;}
.flex-control-nav a{display:inline-block;width:14px;height:14px;line-height:40px;overflow:hidden;background:url(images/dot.png) right 0 no-repeat;cursor:pointer;}
.flex-control-nav .flex-active{background-position:0 0;}
.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%;}
.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}
.flex-direction-nav li a.flex-prev{left:40px;background:url(images/prev.png) center center no-repeat;}
.flex-direction-nav li a.flex-next{right:40px;background:url(images/next.png) center center no-repeat;}
$(document).ready(function(){
$('.flexslider').flexslider({
directionNav: true,
pauseOnAction: false,
slideshowSpeed: 3000
});
});
php 轮播图插件下载,jquery全屏响应式轮播图插件jquery.flexslider.js相关推荐
- 响应式网站导航html,jQuery和CSS3响应式网站导航幻灯片插件
这是一款即实用又炫酷的jQuery和CSS3响应式网站导航幻灯片插件.该插件将幻灯片制作为网站的hero导航,在幻灯片中展示网站各主要板块的内容,使用户可以非常容易的了解网站的主要信息. 该幻灯片插件 ...
- 使用Bootstrap插件(Carousel)制作响应式轮播图
序言: 响应式轮播图制作后不管是大于768px的非移动端还是小于768px的移动端 都会加载所有资源,会导致页面的加载速度和解析效率降低 对移动端极其不利.所以我们需要手写js来动态创建 原因: 之所 ...
- 全屏响应式html5+jquery幻灯片轮播特效,纯CSS3超酷全屏响应式幻灯片特效
这是一款效果非常炫酷的纯CSS3全屏幻灯片特效.该幻灯片特效的效果类似于全屏水平方向的单页滚动效果.该幻灯片效果使用纯CSS3制作,代码仅有100多行,非常的小巧. 制作方法 HTML结构 整个幻灯片 ...
- 20个全屏响应式菜单效果荟萃
#原创 响应式设计 导航菜单 编辑删除管理关注 响应式菜单效果在近些年的网站设计中被广泛的使用,在这篇文章中我们收集了20款最酷的响应式菜单效果,希望大家喜欢! KLM's – Flat or Not ...
- html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法 在页面中引入jqu ...
- html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法 在页面中引入jquery. ...
- slick.js基于jQuery全屏轮播插件
下载地址基于slick.js轮播插件实现的全屏轮播效果,支持图片和文字动画显示效果. dd:
- html全屏banner轮播代码,基于jquery实现全屏banner自动轮播切换
特效描述:基于jquery实现 全屏banner 自动轮播切换.基于jquery实现全屏banner自动轮播切换 代码结构 1. 引入JS 2. HTML代码 *{margin:0;padding:0 ...
- dw html5中怎么设置图片自动切换,DW制作九宫格全屏亮灯轮播图片且自动切换图片教程...
本文介绍的是利用DW制作九宫格全屏亮灯轮播图片并且可以自动切换图片,而且点击图片时还会亮灯,推荐过来,大家一起来学习吧! 软件名称:Adobe Dreamweaver CS3 官方中文安装版软件大小: ...
最新文章
- php仿微信底部菜单,Android实现简单底部导航栏 Android仿微信滑动切换效果
- 隔行换色案例||全选和全不选||QQ表情选择||多选下拉列表左右移动
- PHP LOG使用心得(2)
- 二叉排序树的后序遍历序列必然是递增的_剑指offer 33——二叉搜索树的后序遍历序列...
- MemoryInjector 无痕注入
- sklearn 实例
- 6个重要的.NET概念:栈,堆,值类型,引用类型,装箱,拆箱
- PHP处理图片导致内存溢出
- 创意合成广告欣赏:让人脑洞大开的设计
- NVelocity介绍
- matlab分布拟合函数
- 省级面板数据(1994-2019)十六:公共管理、社会保障和旅游业(stata版)
- 深入理解读写锁ReentrantReadWriteLock
- PANTONE 色号
- 【云原生之Docker实战】使用Docker部署ShowDoc文档工具
- html如何设置下拉列表
- 软考高级五大证书,哪个更值得考?
- python 中文名称文件保存
- 计算机运行慢 卡是什么原因是什么原因,电脑很卡是什么原因
- logf函数和log2f函数之间的转换
热门文章
- xml文件为什么在IE中打开为空白页
- Linux驱动模块编译
- 计算机考试随机出题,打乱题库_有什么软件可以自己导入题库然后可以随机抽题做有没有这种软件啊_淘题吧...
- wifi整机测试软件,dot11Expert(wifi检测工具)
- Xcode 删除PP文件
- 【真人手指动画制作软件】万彩手影大师教程 | 添加背景
- 数据分析方法 - 同期群分析
- android 国密签名,关于国密 (sm2,sm3,sm4)在Linux、python、Android、java、ios中的...
- 【机器学习5】python实现单纯形法和大M法
- 视锥体——初等几何解析