anoslide是一款可调节效果至任意宽度大小,支持图文混合内容显示的图片轮播插件。

在线实例

单个 多个 动画延迟 自动播放
显示分页 显示标题 延迟加载 自适应高度

使用方法

<div class="carousel"> 
    <a class="prev"></a> 
    <ul> 
        <li><a href="javascript:"><img src="data:images/slides/1.jpg"></a></li> 
        <li><a href="javascript:"><img src="data:images/slides/2.jpg"></a></li> 
        ...... 
    </ul> 
    <a class="next"></a> 
</div> $(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 强制显示1个幻灯片,适用于较小的视口,如移动设备 480
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

8种效果实例-jQuery anoSlide 焦点图轮播的更多相关文章

  1. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  2. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  3. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  4. 基于jQuery游戏网站焦点图轮播特效

    基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <cente ...

  5. JavaScript基础 -- 焦点图轮播(转载)

    首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -60 ...

  6. 原生JavaScript实现焦点图轮播

    不管是高校的网站还是电商的页面,焦点图的切换和轮播应该是一项不可或缺的应用.今天把焦点图轮播制作的技术要点做下笔记,以供日后查看. 一.结构层(HTML) 焦点图的HTML结构很简单,就是一个父容器( ...

  7. KinSlideshow焦点图轮播插件

    KinSlideshow默认设置效果代码: *焦点图显示的标题为 img 中 alt 属性中的文字 *当只有一张图片时不显示按钮,但也会有无缝切换效果 * jquery ..以上版本 jvascrip ...

  8. myFocus 焦点图/轮播插件

    最近产品突然就来个需求,要加轮播图,而且是立马要上线,于是乎发现了一个超级简便好用的轮播图插件myFocus,而且myFocus提供很多种风格,可以选择. 这里是使用说明 http://www.chh ...

  9. [Jquery]焦点图轮播效果

    $(function(){    var $next=$(".right");    var $prev=$(".left");    var $list_nu ...

随机推荐

  1. 使用Depth Texture

    使用Depth Textures: 可以将depth信息渲染到一张texture,有些效果的制作会需要scene depth信息,此时depth texture就可以派上用场了. Depth Text ...

  2. Tmux - Linux从业者必备利器

    本文详细介绍tmux的概念和搭建过程 本博客已经迁移至: http://cenalulu.github.io/ 为了更好的体验,请通过此链接阅读: http://cenalulu.github.io/ ...

  3. 机器学习&数据挖掘笔记_24(PGM练习八:结构学习)

    前言: 本次实验包含了2部分:贝叶斯模型参数的学习以及贝叶斯模型结构的学习,在前面的博文PGM练习七:CRF中参数的学习 中我们已经知道怎样学习马尔科夫模型(CRF)的参数,那个实验采用的是优化方法, ...

  4. Linux - Screen

    GNU's Screen homepage Screen是由GNU计划开发的用于命令行终端切换的自由软件,可以看作是窗口管理器的命令行界面版本. 可以通过该软件同时连接多个本地或远程的命令行会话,并在 ...

  5. Android Studio1.4.x JNI开发基础-基本环境配置

    从Eclipse时代到Android Studio普及,开发工具越来越好用.早些时候还需要安装Cygwin工具,从Android Studio1.3以后,在Android 环境开发JNI程序搭建开发环 ...

  6. 基于HT for Web 3D呈现Box2DJS物理引擎

    上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是 ...

  7. django多条件筛选搜索(项目实例)

    多条件搜索在很多网站上都有用到,比如京东,淘宝,51cto,等等好多购物教育网站上都有,当然网上也有很多开源的比楼主写的好的多了去了,仅供参考,哈哈 先来一张效果图吧,不然幻想不出来是什么样的,前端样 ...

  8. angularJS配合bootstrap动态加载弹出提示内容

    1.bootstrp的弹出提示 bootstrap已经帮我们封装了非常好用的弹出提示Popover. http://v3.bootcss.com/javascript/#popovers 2.自定义p ...

  9. SQL约束

    SQL约束: 非空约束:就是不能为null: 主键约束(PK):唯一,不重复,并且不为空: 唯一约束:唯一,允许为空,但只能出现一次: 默认约束:如果不给值,默认值: 检查约束:范围以及格式限制: 外 ...

  10. 【转载】ASP.NET MVC Web API 的路由选择

    此文章描述了ASP.NET Web API如何将Http请求路由到controller. 路由表 在ASP.NET Web API中,controller是用来处理HTTP请求的一个类.这个类中用于处 ...