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

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

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),可前后翻页,兼容主流浏览器!
  幻灯片和轮播图
 5845  26

基于GSAP的响应式全屏背景图片jQuery幻灯片插件

基于GSAP的响应式全屏背景图片jQuery幻灯片插件
  幻灯片和轮播图
 7921  58

JQUERY多变的幻灯片-COOLCAROUSELS-做中右切换

CoolCarousels集合了多种模式的幻灯片,每种模式都有不同德样式和外观,基于jQuery库构建而成。有带有缩略图导航的幻灯片,有包含动态项的旋转木马等等,你基本上可以在这里找到所有类型的幻灯片。到目前为止,CoolCarousels一共有65种类型,那么接下来我就挑选其中的一些来讲解。
  幻灯片和轮播图
 11718  34

清新幻灯片插件-AVIASLIDER

AviaSlider是一款简洁清新的幻灯片插件,有8种切换特效可供我们选择,当我们点击某张幻灯片的时候还会弹出框来显示该大图。自行配置参数来创建我们自己的特效。包含了预加载的图片。自动播放并且在用户交互后停止。其中包含了html5和css3的内容。几乎支持所有浏览器。
  幻灯片和轮播图
 13022  12

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

取消回复