flexSlider 图片轮播插件的使用(附参数设置)

2024-08-31 02:08

本文主要是介绍flexSlider 图片轮播插件的使用(附参数设置),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前提:下载插件(官网下载地址:http://flexslider.woothemes.com/ 请用IE打开,chrome可能打不开;其他下载地址:点击打开链接),并引入flexslider.css和jquery.flexslider-min.js文件(缺一不可)

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

核心

html代码:
<div id="slider" class="flexslider ">   <!-- 固定写法 --><ul class="slides"> <!--固定写法--><li class="images"><img src="../src/images/bg1.jpg" /></li><li class="images"><img src="../src/images/bg3.jpg" /></li></ul></div>

js代码:
		$('#slider').flexslider({    animation: "solid", //动画效果animationLoop: true, //是否循环播放controlNav: true,directionNav: false,startAt: 0, // Integer: 开始播放的 slide,从 0 开始计数slideshow: true, // Boolean: 是否自动播放slideshowSpeed: 3000, // Integer: ms 滚动间隔时间animationSpeed: 600, // Integer: ms 动画滚动速度direction: "horizontal", // String: 滚动方向 ["horizontal"|"vertical"]prevText:' <img src="../../common/img/prev.png">',           // String: 上一个按钮文字(),nextText: '<img src="../../common/img/next.png">',           // String: 下一个按钮文字after:function(slider){	//加载完成后回调函数
//		    	console.log(slider)}
效果:

默认参数说明(此处引用amazeUI 文档,地址 http://amazeui.org/javascript/slider):
  animation: "slide",             // String: ["fade"|"slide"],动画效果easing: "swing",                // String: 滚动动画计时函数direction: "horizontal",        // String: 滚动方向 ["horizontal"|"vertical"]reverse: false,                 // Boolean: 翻转 slide 运动方向animationLoop: true,            // Boolean: 是否循环播放smoothHeight: false,            // Boolean: 当 slide 图片比例不一样时// "true": 父类自动适应图片高度// "false": 不自动适应,父类高度为图片的最高高度,默认为falsestartAt: 0,                     // Integer: 开始播放的 slide,从 0 开始计数slideshow: true,                // Boolean: 是否自动播放slideshowSpeed: 5000,           // Integer: ms 滚动间隔时间animationSpeed: 600,            // Integer: ms 动画滚动速度initDelay: 0,                   // Integer: ms 首次执行动画的延迟randomize: false,               // Boolean: 是否随机 slide 顺序// Usability featurespauseOnAction: true,            // Boolean: 用户操作时停止自动播放pauseOnHover: false,            // Boolean: 悬停时暂停自动播放useCSS: true,                   // Boolean: 是否使用 css3 transitiontouch: true,                    // Boolean: 允许触摸屏触摸滑动滑块video: false,                   // Boolean: 使用视频的 slider,防止 CSS3 3D 变换毛刺// Primary ControlscontrolNav: true,               // Boolean: 是否创建控制点directionNav: true,             // Boolean: 是否创建上/下一个按钮(previous/next)prevText: "Previous",           // String: 上一个按钮文字,可为html元素nextText: "Next",               // String: 下一个按钮文字,可为html元素// Secondary Navigationkeyboard: true,                 // Boolean: 是否开启键盘左(←)右(→)控制multipleKeyboard: false,        // Boolean: 是否允许键盘控制多个 slidemousewheel: true,               // Boolean: 是否开启鼠标滚轮控制pausePlay: false,               // Boolean: 是否创建暂停与播放按钮pauseText: 'Pause',             // String: 暂停按钮文字playText: 'Play',               // String: 播放按钮文字// Special propertiescontrolsContainer: "",          // jQuery Object/SelectormanualControls: "",             // jQuery Object/Selector 自定义控制 slider 的元素,// 如 "#tabs-nav li img",导航数量和 slide 数量一样sync: "",                       // Selector: 关联 slide 与 slide 之间的操作。asNavFor: "",                   // Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider// Carousel OptionsitemWidth: 0,                   // Integer: slide 宽度,多个同时滚动时设置itemMargin: 0,                  // Integer: slide 间距minItems: 1,                    // Integer: 最少显示 slide 数, 与 `itemWidth` 相关maxItems: 0,                    // Integer: 最多显示 slide 数, 与 `itemWidth` 相关move: 0,                        // Integer: 一次滚动移动的 slide 数量,0 - 滚动可见的 slide// Callback APIstart: function(){},            // Callback: function(slider) - 初始化完成的回调before: function(){},           // Callback: function(slider) - 每次滚动开始前的回调after: function(){},            // Callback: function(slider) - 每次滚动完成后的回调end: function(){},              // Callback: function(slider) - 执行到最后一个 slide 的回调added: function(){},            // Callback: function(slider) - slide 添加时触发removed: function(){}           // Callback: function(slider) - slide 被移除时触发

拓展

1、导航控制嵌入图片中
改变 css属性即可:
.flex-control-nav{bottom:0px
}
2、设置默认左右方向按钮样式
修改css属性
.flex-direction-nav a {text-decoration: none;display: block;width: 40px;height: 48px;margin: -20px 0 0;position: absolute;top: 50%;z-index: 10;overflow: hidden;opacity: 0;cursor: pointer;/*color: rgba(0, 0, 0,0);*/background: url(../img/13.jpg) no-repeat;      //看这里,看这里text-indent: -999em
}
修改js,将prevText 和 prevNext注释掉

图片 13.jpg ,“右键--图片另存为”使用。

这篇关于flexSlider 图片轮播插件的使用(附参数设置)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1122579

相关文章

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

使用DeepSeek搭建个人知识库(在笔记本电脑上)

《使用DeepSeek搭建个人知识库(在笔记本电脑上)》本文介绍了如何在笔记本电脑上使用DeepSeek和开源工具搭建个人知识库,通过安装DeepSeek和RAGFlow,并使用CherryStudi... 目录部署环境软件清单安装DeepSeek安装Cherry Studio安装RAGFlow设置知识库总

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g

Maven pom.xml文件中build,plugin标签的使用小结

《Mavenpom.xml文件中build,plugin标签的使用小结》本文主要介绍了Mavenpom.xml文件中build,plugin标签的使用小结,文中通过示例代码介绍的非常详细,对大家的学... 目录<build> 标签Plugins插件<build> 标签<build> 标签是 pom.XML

JAVA虚拟机中 -D, -X, -XX ,-server参数使用

《JAVA虚拟机中-D,-X,-XX,-server参数使用》本文主要介绍了JAVA虚拟机中-D,-X,-XX,-server参数使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录一、-D参数二、-X参数三、-XX参数总结:在Java开发过程中,对Java虚拟机(JVM)的启动参数进

Java中使用注解校验手机号格式的详细指南

《Java中使用注解校验手机号格式的详细指南》在现代的Web应用开发中,数据校验是一个非常重要的环节,本文将详细介绍如何在Java中使用注解对手机号格式进行校验,感兴趣的小伙伴可以了解下... 目录1. 引言2. 数据校验的重要性3. Java中的数据校验框架4. 使用注解校验手机号格式4.1 @NotBl