jQuery自适应的幻灯片插件easySlider.js

所属分类:媒体-幻灯片和轮播图

 11093  24  查看评论 (9)
jQuery自适应的幻灯片插件easySlider.js ie兼容8

jQuery-slider Plugin

jQuery-slider提供了一个简单的,自适应的幻灯片。

使用方法

在页面中引入jquery和easySlider.js文件,以及样式文件style.css。

<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="dist/js/jquery.min.js"></script>                  
<script src="dist/js/easySlider.js"></script>

HTML结构

该轮播图的HTML结构如下:

<div id="slider">
    <ul class="slides">
        <li><img class="responsive" src="img/1.png"></li>
        <li><img class="responsive" src="img/2.png"></li>
        <li><img class="responsive" src="img/3.png"></li>
        <li><img class="responsive" src="img/4.png"></li>
    </ul>
    <ul class="controls">
        <li><img src="img/prev.png" alt="previous"></li>
        <li><img src="img/next.png" alt="next"></li>
    </ul>
    <ul class="pagination">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

初始化插件

在页面DOM元素加载完毕之后,可以通过easySlider()方法来初始化该轮播图插件。

$(function() {
    $("#slider").easySlider({});
});

 配置参数

参数默认值描述
slideSpeed500轮播图切换的过渡时间,单位毫秒。
paginationSpacing"15px"分页圆点标记的间隙。
paginationDiameter"12px"分页圆点的直径。
paginationPositionFromBottom"20px"分页圆点到轮播图底部的距离。
slidesClass".slides"轮播图的class名称。
controlsClass".controls"左右控制按钮的class名称。
paginationClass".pagination"分页圆点导航按钮的class名称。
相关插件-幻灯片和轮播图

jQuery超酷响应式圆形图片轮播图特效

jQuery超酷响应式圆形图片轮播图,幻灯片,焦点图特效
  幻灯片和轮播图
 14816  82

HTML5全屏动画幻灯片切换

超炫酷HTML5响应式全屏幻灯片切换
  幻灯片和轮播图
 5584  52

带缩略图的图片点击切换

jCarousel带缩略图的图片点击切换插件
  幻灯片和轮播图
 12313  62

jQuery轻量级全屏轮播图

jQuery轻量级全屏自动轮播图,兼容ie7以上浏览器
  幻灯片和轮播图
 9138  21

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币

    滑稽树上滑稽果丶 0
    2018/2/12 16:56:16
    为什么轮播速度那么快? 没有地方调整间隔时间? 只有切换过渡时间,没有停留时间????
        滑稽树上滑稽果丶0
        2018/2/13 9:31:58

        找到了~~~ 

        var stop = setinterval(function() {
            slide();
        }, 1500); //这里改停顿时间
    回复
    唐大仙 0
    2018/1/24 17:20:28
    刷新的时候图片没有堆叠到一起 回复
    光辉岁月づ 0
    2017/12/26 19:22:49

    怎么禁掉自动播放功能呢?  参数是auto么? 为啥不起作用?!!

        修身1
        2018/1/9 10:09:33
        autoSlide: true //改成false
    回复
    菜菜77 0
    2017/12/14 15:29:09

    工程师,能教我下具体应用吗?放到banner里显示不出效果

    回复
    @苦笑 0
    2017/12/5 15:24:28

    不支持手机端么?

    回复
    阿鹿 0
    2017/11/22 16:53:56
    快速点击有问题
        作??怪0
        2017/11/27 23:59:51

        可能动画效果前面没给 .stop()

    回复
取消回复