轮播插件——flexslider

article/2025/11/5 18:35:26

轮播插件——flexslider,
首先，当我们需要轮播插件的时候呢，去浏览器中找自己需要的轮播插件，比如，搜索关键词“JQuery轮播插件”，就会出来很多网站，选一个点进去，预览效果，然后下载我们需要的插件。这里我下载的是flexslider轮播插件，下载解压完之后呢，一共是以下素材，我们选择必要的东西留下
这里写图片描述
首先，jquery.flexslider-min是压缩版的jQuery、jQuery.flexslider的js文件和flexslider的CSS文件（点击查看文件可以判断是哪类文件）我们留下（命名一般与下载的文件名一致）
然后呢点进去demo文件夹

显然images里面存放的是素材（图片），选择留下，还有就是留下来index这个网页，便于查看源码，留下来的东西呢就这些了，(其实留下来的东西也就一个jQuery和css(同名的文件)，还有素材）下面是写怎么用。
首先我们得有一个自己的jQuery库，把下载的jQuery放到同一个文件目录下，css放到css目录下，然后创建一个HTML
这里写图片描述

写一个最简单的，只需要些存放图片的div

<body>
<div class="flexslider"><ul class="slides "><li><img src="images/kitchen_adventurer_caramel.jpg" alt=""/></li><li><img src="images/kitchen_adventurer_cheesecake_brownie.jpg" alt=""/></li><li><img src="images/kitchen_adventurer_donut.jpg" alt=""/></li><li><img src="images/kitchen_adventurer_lemon.jpg" alt=""/></li></ul>
</div>
</body>

引用js文件与css文件（我们需要的文件）
这里写图片描述

我们开始写js代码：
所谓插件呢，就是帮我们解决问题的，所以并不需要我们去写什么复杂的东西一般必须要写的代码就是
存放图片li的父元素也就是ul标签的类名调用同名的方法即可，比如

$(".slides").slides();

就可以了，但是在我实际写的时候呢，这个插件不能这么用，解决问题最直接的方法就是查看源代码，还记得刚保存下来的那个网页吗index，F12打开源代码查看发现人家代码写的上一级的class名
这里写图片描述
问题解决了，照抄

 $(".flexslider").flexslider({animation:'slide',prevText: "",nextText: "",direction: "vertical",});

animation:’slide’,是切换的方式
prevText: “”,
nextText: “”,见名思义，是两个方向键
direction: “vertical”,是支持触摸屏
这其实就已经实现我们所见的动画效果了，但是根据需求呢，我们需要改一下CSS样式，打开刚刚我们保存的flexslider文件（js文件），在文件的最下部一般会有各种标签的默认样式设置，比如：
这里写图片描述

这些样式是默认样式，如果我们需要改成自己喜欢的样式的，就需要去了解各写属性，比如第三行的代码

 animation: "fade",

通过菜鸟网了解它是CSS3的属性，值得是水平切换还是垂直切换的动画效果，在js方法里面我们改变为垂直方向的切换

   animation:'slide',

这就实现了我们想要的效果。其实轮播的插件大多都是这个套路，不需要去了解每一个。知道怎么用就可以了
这里我们要找的东西呢通过他们的主页面的源代码可以知道，看他们引用的各种插件，只要找到与我们下载的文件名一直的插件名，这就是在我们下载的文件中我们必须要留下的文件。总结不是很到位，最主要的还是多用几个插件找到其中的方法，用的熟练了就可以了

这里写图片描述