首页 > 其他分享 >Flexslider图片轮播、文字图片相结合滑动切换效果

Flexslider图片轮播、文字图片相结合滑动切换效果

时间:2023-06-08 17:36:46浏览次数:62  
标签:function 滚动 轮播 Flexslider flexslider 内容 滑动 图片


Flexslider是一款基于的jQuery内容滚动插件。它能让你轻松的创建内容滚动的效果,具有非常高的可定制性。开发者可以使用Flexslider轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。



查看演示DEMO 下载源码



Flexslider具有以下特性:

  • 支持滑动和淡入淡出效果。
  • 支持水平、垂直方向滑动。
  • 支持键盘方向键控制。
  • 支持触控滑动。
  • 支持图文混排,支持各种html元素。
  • 自适应屏幕尺寸。
  • 可控制滑动单元个数。
  • 更多选项设置和回调函数。

HTML

首先在页面head部位载入jquery库文件和Flexslider插件,以及Flexslider所需的基本css样式文件。

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

 

然后在body中加入以下HTML代码:

<div class="flexslider"> 
      <ul class="slides"> 
        <li><img src="images/s1.jpg" /></li> 
        <li><img src="images/s2.jpg" /></li> 
        <li><img src="images/s3.jpg" /></li> 
        <li><img src="images/s4.jpg" /></li> 
      </ul> 
</div>

 

我们使用了.flexslider来包括所有需要滚动的内容元素,然后使用<ul class="slides">这个class非常关键,内部的滚动内容都是针对.slides的,然后在<li>内部加入任意html元素,包括图片和文字。

jQuery

调用Flexslider插件非常简单,使用如下代码:



$(function() { 
    $(".flexslider").flexslider(); 
});


  


然后预览网页效果,一个内容切换效果就完成了,当然想要更多个性化设置,flexslider提供了丰富的选项配置以及回调函数绝对可以满足大多数开发者需求。

Flexslider选项设置

参数

描述

默认值

animation

动画效果类型,有"fade":淡入淡出,"slide":滑动

"fade"

easing

内容切换时缓动效果,需要jquery easing插件支持

"swing"

direction

内容滚动方向,有"horizontal":水平方向 和"vertical":垂直方向

"horizontal"

animationLoop

是否循环滚动

true

startAt

初始滑动时的起始位置,定位从第几个开始滑动

0

slideshow

是否自动滑动

true

slideshowSpeed

滑动内容展示时间(ms)

7000

animationSpeed

内容切换时间(ms)

600

initDelay

初始化时延时时间

0

pauseOnHover

鼠标滑向滚动内容时,是否暂停滚动

false

touch

是否支持触摸滑动

true

directionNav

是否显示左右方向箭头按钮

true

keyboard

是否支持键盘方向键操作

true

minItems

一次最少展示滑动内容的单元个数

1

maxItems

一次最多展示滑动内容的单元个数

0

move

一次滑动的单元个数

0

回调函数

start: function(){},

before: function(){},

after: function(){},

end: function(){},

added: function(){},

removed: function(){},

init: function(){},

-

更多Flexslider相关信息可以访问Flexslider官网地址:http://www.woothemes.com/flexslider/



helloweba.com

标签:function,滚动,轮播,Flexslider,flexslider,内容,滑动,图片
From: https://blog.51cto.com/u_8895844/6441663

相关文章

  • 让一张图片从模糊慢慢变清晰动画过程
    importjava.io.IOException;importjava.io.InputStream;importandroid.app.Activity;importandroid.content.Context;importandroid.content.res.AssetManager;importandroid.graphics.Bitmap;importandroid.graphics.BitmapFactory;importandroid.os.Bundle;......
  • 对图片进行压缩处理
    composerrequireintervention/image<?phpnamespaceapp\api\controller;useIntervention\Image\ImageManagerStaticasImage;classTestextendsBase{publicfunctionindex(){$folderPath='./upload';$files=$this->get......
  • python Tesseract 图片识别文字
    Python识别图片中的文字(zhihu.com)超详细解决pytesseract.pytesseract.TesseractNotFoundError:tesseractisnotinstalledorit'snotinyo...-简书(jianshu.com)......
  • python opencv图片旋转任意角度
    pythonopencv图片旋转任意角度 importcv2#Loadtheimageimg=cv2.imread("20230222100736979.jpg")#Gettheimagedimensionsheight,width=img.shape[:2]#Settherotationangleangle=25#Calculatetherotationmatrixrotation_matrix=cv2......
  • 如何将word图片粘贴到UMEditor里面
    ​ 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。加入下面的代码://判断剪......
  • vue 预览word文档、图片、pdf文件等
    <el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handlePreviewFile(obj)">预览</el-button><el-dialogtitle="预览":visible.sync="......
  • 如何将word图片粘贴到HTML编辑器里面
    ​ 在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper。通过知乎提供的思路找到粘贴的原理,通过TheViper找到粘贴图片的方法。其原理为一下步骤:监听粘贴事件;【用于插入图片】获取光标位置;【......
  • elementUI下拉框图片
    1、定义数据optionsisAgent:[ //事项咨询群众标识        {          id:'1630396469564334081',          name:'高危',          url:require('@/assets/err.png')     ......
  • 微信dat文件转图片(jpg,png,gif)
    微信电脑版现在已经是日常工作生活必不可少的工具,有时删除了聊天记录或被系统清理软件清理了,但还想查看曾经的微信聊天图片。这个时候辛辛苦苦找到了文件,却发现无法查看,因为微信电脑版为了保护我们的隐私,把原先的图片格式文件给做了加密处理变成了DAT格式,这里不得不给微信一个大大......
  • poi根据模版导出多页word,带插入图片,并压缩下载
    工具类代码packagecn.edu.nfu.jw.srs.utils;importorg.apache.poi.xwpf.usermodel.*;importorg.apache.xmlbeans.XmlOptions;importorg.openxmlformats.schemas.wordprocessingml.x2006.main.CTBody;importjavax.servlet.http.HttpServletResponse;importjava.io.*;i......