轮播插件——flexslider

轮播插件——flexslider,
首先,当我们需要轮播插件的时候呢,去浏览器中找自己需要的轮播插件,比如,搜索关键词“JQuery轮播插件”,就会出来很多网站,选一个点进去,预览效果,然后下载我们需要的插件。这里我下载的是flexslider轮播插件,下载解压完之后呢,一共是以下素材,我们选择必要的东西留下
轮播插件——flexslider_第1张图片
首先,jquery.flexslider-min是压缩版的jQuery、jQuery.flexslider的js文件和flexslider的CSS文件(点击查看文件可以判断是哪类文件)我们留下(命名一般与下载的文件名一致)
然后呢点进去demo文件夹
轮播插件——flexslider_第2张图片
显然images里面存放的是素材(图片),选择留下,还有就是留下来index这个网页,便于查看源码,留下来的东西呢就这些了,(其实留下来的东西也就一个jQuery和css(同名的文件),还有素材)下面是写怎么用。
首先我们得有一个自己的jQuery库,把下载的jQuery放到同一个文件目录下,css放到css目录下,然后创建一个HTML
轮播插件——flexslider_第3张图片

写一个最简单的,只需要些存放图片的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文件(我们需要的文件)
轮播插件——flexslider_第4张图片

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

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

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

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

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

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

 animation: "fade", 

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

   animation:'slide',

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

轮播插件——flexslider_第7张图片

你可能感兴趣的:(jquery)