jQuery响应式轮播图插件edslider

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

 46803  375  查看评论 (9)
分享到微信朋友圈
X
jQuery响应式轮播图插件edslider ie兼容9

简要教程

edslider是一款时尚的响应式jQuery焦点图插件。该焦点图插件支持图片、文字或混合内容,支持无限轮播效果。它的特点还有:

  • 响应式设计。

  • 带进度条显示焦点图的进度。

  • 自动播放,无限循环。

  • 可以自定义皮肤。

  • 支持图层加载时显示spinner。

使用方法

使用edslider焦点图插件需要在页面中引入edslider.css和jquery,以及jquery.edslider.js文件。

<link rel="stylesheet" href="css/edslider.css">
<script src="path/to/jquery.js" type="text/javascript"></script>
<script src="path/to/jquery.edslider.js"></script>

HTML结构

该焦点图使用无序列表来制作。

<ul class="mySlideshow">
    <li>Yor stuff here!</li>
    <li>Yor stuff here!</li>
    <li>Yor stuff here!</li>
</ul>

初始化插件

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

$(document).ready(function(){
    //Initiazile plugin with your preferences
    $('.mySlideshow').edslider({
        width:'960',
        height:'400'
    });
});

配置参数

edslider焦点图插件可用的配置参数如下:

参数默认值描述
width960焦点图的宽度。
height400焦点图的高度。
position1开始的位置。
interval5000焦点图之间切换的时间间隔,单位毫秒。
duration500动画的持续时间,单位毫秒。
animationtrue是否允许动画。
paginatortrue是否显示分页圆点。
navigatortrue是否显示前后导航按钮。
progresstrue是否显示进度条。
loadImgSrc'images/load.gif'加载图片的地址。
skin'edslider'皮肤的名称。



相关插件-幻灯片和轮播图

js商品详情轮播图

产品组图展示,自动轮播图
  幻灯片和轮播图
 38188  366

支持触屏的响应式带左右按钮的焦点图插件

jQuery触屏的响应式焦点图插件royalslider
  幻灯片和轮播图
 27096  376

强大的js焦点图插件myFocus(完整版)

myFocus是一个专注于WEB端焦点图轮换图的JS库。该焦点图插件集成了30多种风格图片切换效果,体积小,使用简单,兼容ie6+和所有的主流浏览器。
  幻灯片和轮播图
 41165  453

jQuery手机响应式设计焦点图

jQuery手机响应式设计焦点图
  幻灯片和轮播图
 41243  405

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

    Xshuo 0
    2019/1/16 17:13:26
    有bug,当使用JQ的attr()方法向img标签中添加src时,图片根本显示不出来。 回复
    0
    2019/1/9 16:54:53
    怎么调分页原点的位置,图片变小了但那几个圆点还是在原位 回复
    2017 0
    2018/8/2 11:40:57
    Uncaught TypeError: $(...).edslider is not a function
       at HTMLDocument.eval (eval at <anonymous> (jquery-1.8.3.min.js:2), <anonymous>:8:20)
       at l (eval at <anonymous> (jquery-1.8.3.min.js:2), <anonymous>:2:16996)
       at Object.fireWith [as resolveWith] (eval at <anonymous> (jquery-1.8.3.min.js:2), <anonymous>:2:17783)
       at ready (eval at <anonymous> (jquery-1.8.3.min.js:2), <anonymous>:2:12504)

    会报错呀

        西瓜0
        2018/8/2 13:27:21
        jquery.edslider.js插件没有调用好,检查路径。
    回复
    ycg769695732 0
    2018/5/26 15:12:19
    挺好用的一个插件 回复
    叶わない恋でも 0
    2017/12/7 14:49:48

    这个很好用啊~我自己一个页面要用很多这个效果,加了几个参数来控制圆点的位置和大小,可以说很有收获了,而且作者的代码风格简洁易懂,比我找的其他的好多了

    回复
    ┽陌路,归客ぅ 0
    2016/9/23 10:09:28
    改变高度后,前后按钮和下面焦点位置变化了。
        Ezio Auditore Da Firenze0
        2017/5/3 19:33:47

        这就不会调了???

        一入江湖岁月催0
        2019/7/25 11:07:32
        基础不够扎实
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复