[代码样式]jQuery幻灯片插件anoSlide

脚本代码
20年10月23日
编辑

简介

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

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

兼容

浏览器兼容：兼容所有浏览器，包括 IE6、IE7。

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

使用方法

1、引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.anoslide.js"></script>

2、HTML

<div class="carousel">
    <a class="prev"></a>
    <ul>
        <li><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="https://www.dowebok.com/images/slides/1.jpg"></a></li>
        <li><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="https://www.dowebok.com/images/slides/2.jpg"></a></li>
        <li><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="https://www.dowebok.com/images/slides/3.jpg"></a></li>
        <li><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="https://www.dowebok.com/images/slides/4.jpg"></a></li>
        <li><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="https://www.dowebok.com/images/slides/5.jpg"></a></li>
        <li><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="https://www.dowebok.com/images/slides/6.jpg"></a></li>
        <li><a href="https://www.dowebok.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="https://www.dowebok.com/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