幻灯片/轮播

edslider - 时尚响应式jQuery焦点图插件

阿里云


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

响应式设计

也想出现在这里?联系我们
创客主机

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

自动播放,无限循环

可以自定义皮肤

支持图层加载时显示 spinner

使用方法:

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

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

HTML 结构:

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

  1. <ul class="mySlideshow">
  2.     <li>Yor stuff here!</li>
  3.     <li>Yor stuff here!</li>
  4.     <li>Yor stuff here!</li>
  5. </ul>

初始化插件:

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

  1. $(document).ready(function(){
  2.     //Initiazile plugin with your preferences
  3.     $('.mySlideshow').edslider({
  4.         width:'960',
  5.         height:'400'
  6.     });
  7. });

配置参数:

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' 皮肤的名称。

Github 地址:https://github.com/eduardocmoreno/edslider

edslider - 时尚响应式 jQuery 焦点图插件

已有 300 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!