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

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

 8000  22  查看评论 (6)
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带缩略图轮播图插件SliderPro

jQuery基于SliderPro实现的左右布局带缩略图轮播图效果
  幻灯片和轮播图
 12554  97

模板京东淘宝点击购物网站jQuery多图切换代码

模板京东淘宝点击购物网站jQuery多图切换代码。
  幻灯片和轮播图
 14820  139

带各种百叶窗过渡效果的jQuery幻灯片插件

osSlider是一款简单实用的带各种百叶窗过渡效果的jQuery幻灯片插件。该幻灯片插件在slide过渡时随机生成各种百叶窗效果,它使用简单,通过简单的设置即可正常工作。
  幻灯片和轮播图
 11479  85

jquery分层轮播插件jquery.zySlide

jquery实现分层轮播3d旋转效果
  幻灯片和轮播图
 18378  92

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

    光辉岁月づ 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()

    回复
取消回复