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焦点图插件可用的配置参数如下：

edslider焦点图插件的github地址为：https://github.com/eduardocmoreno/edslider。

在线预览    源码下载