当前位置：首页 > 网页特效 > 幻灯片和轮播图

jQuery edslider焦点图插件

分类：幻灯片和轮播图日期：2024-05-14 点击(3) 评论(0)

演示免费下载

简介

#### 简要教程

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

1. 响应式设计。

3. 带进度条显示焦点图的进度。

5. 自动播放，无限循环。

7. 可以自定义皮肤。

9. 支持图层加载时显示spinner。

#### 使用方法
------------

使用edslider焦点图插件需要在页面中引入edslider.css和jquery，以及jquery.edslider.js文件。
```javascript
<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结构
------------
该焦点图使用无序列表来制作。
```javascript
<ul class="mySlideshow">
    <li>Yor stuff here!</li>
    <li>Yor stuff here!</li>
    <li>Yor stuff here!</li>
</ul>
```
#### 初始化插件
------------
在页面DOM元素加载完毕之后，可以通过edslider()方法来初始化该焦点图插件。
```javascript
$(document).ready(function(){
    //Initiazile plugin with your preferences
    $('.mySlideshow').edslider({
        width:'960',
        height:'400'
    });
});
```
#### 配置参数
------------
edslider焦点图插件可用的配置参数如下：

|  参数 |  默认值 |描述 |
| ------------ | ------------ |------------ |
| width  |  960 | 焦点图的宽度。|
| height  |  400 |焦点图的高度。 |
| position  | 1  | 开始的位置。|
| interval  |  5000 |焦点图之间切换的时间间隔，单位毫秒。 |
|  duration | 500  |动画的持续时间，单位毫秒。 |
|  animation | true  | 是否允许动画。|
| paginator  | true  |是否显示分页圆点。 |
| navigator  | true  |是否显示前后导航按钮。 |
| progress  | true  |是否显示进度条。 |
|  loadImgSrc |'images/load.gif'   | 加载图片的地址。|
|  skin | 'edslider'  | 皮肤的名称。|

web299.com

jQuery edslider焦点图插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果