dowebok

jQuery幻灯片插件anoSlide

分类:代码 日期: 点击(6,197) 评论(0)

jQuery幻灯片插件anoSlide

演 示 下 载

简介

anoSlide 是一个轻量级的 jQuery 幻灯片插件,未压缩也不到 8KB,它具有以下特点:

  • 支持响应式
  • 支持内容混合(图片/文字)
  • 无需 CSS
  • 支持图片延迟加载
  • 支持回调函数
  • 支持自适应高度
  • 易于扩展

兼容

浏览器兼容:兼容所有浏览器,包括 IE6、IE7。

jQuery 兼容:兼容 1.7 及以上版本。

使用方法

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.anoslide.js"></script>

2、HTML

<div class="carousel">
    <a class="prev"></a>
    <ul>
        <li><a href="http://www.dowebok.com/"><img src="images/slides/1.jpg"></a></li>
        <li><a href="http://www.dowebok.com/"><img src="images/slides/2.jpg"></a></li>
        <li><a href="http://www.dowebok.com/"><img src="images/slides/3.jpg"></a></li>
        <li><a href="http://www.dowebok.com/"><img src="images/slides/4.jpg"></a></li>
        <li><a href="http://www.dowebok.com/"><img src="images/slides/5.jpg"></a></li>
        <li><a href="http://www.dowebok.com/"><img src="images/slides/6.jpg"></a></li>
        <li><a href="http://www.dowebok.com/"><img src="images/slides/7.jpg"></a></li>
    </ul>
    <a class="next"></a>
</div>

3、JavaScript

$(function(){
    $('.carousel ul').anoSlide({
        items: 1,
        speed: 500,
        prev: 'a.prev',
        next: 'a.next'
    });
});

配置

参数/方法 类型 默认值 说明
items 整数 5 幻灯片每页可见个数
speed 整数 1000 幻灯片切换速度,以毫秒为单位
auto 整数 0 自动播放,值为一个整数,表示多久自动切换一次,单位为毫秒,0 表示不自动播放
autoStop 布尔值 true 鼠标悬停停止自动播放
next 字符串 为“下一个”绑定一个选择器
prev 字符串 为“上一个”绑定一个选择器
responsiveAt 整数 480 强制显示1个幻灯片,适用于较小的视口,如移动设备
delay 整数 0 动画延迟,0 表示不延迟
lazy 布尔值 false 图片延迟加载
onConstruct 整数 初始化后的回调函数,可传递参数:
instance – Instance of anoSlide
onStart 整数 切换之前的回调函数,可传递参数:
ui.instance – Instance of anoSlideui.index – Number of current slideui.slide – Current slideui.slide.element – Current slide element
onEnd 整数 切换之后的回调函数,可传递参数:
ui.instance – Instance of anoSlide
ui.index – Number of current slideui.slide – Current slideui.slide.element – Current slide element

演 示 下 载

anoSlide 主页:点击访问

标签:

相关文章