8种效果实例-jQuery anoSlide 焦点图轮播
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 焦点图轮播的更多相关文章
- jQuery制作焦点图(轮播图)
焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- JS、JQ实现焦点图轮播效果
JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...
- JS实现焦点图轮播效果
大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...
- 基于jQuery游戏网站焦点图轮播特效
基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <cente ...
- JavaScript基础 -- 焦点图轮播(转载)
首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -60 ...
- 原生JavaScript实现焦点图轮播
不管是高校的网站还是电商的页面,焦点图的切换和轮播应该是一项不可或缺的应用.今天把焦点图轮播制作的技术要点做下笔记,以供日后查看. 一.结构层(HTML) 焦点图的HTML结构很简单,就是一个父容器( ...
- KinSlideshow焦点图轮播插件
KinSlideshow默认设置效果代码: *焦点图显示的标题为 img 中 alt 属性中的文字 *当只有一张图片时不显示按钮,但也会有无缝切换效果 * jquery ..以上版本 jvascrip ...
- myFocus 焦点图/轮播插件
最近产品突然就来个需求,要加轮播图,而且是立马要上线,于是乎发现了一个超级简便好用的轮播图插件myFocus,而且myFocus提供很多种风格,可以选择. 这里是使用说明 http://www.chh ...
- [Jquery]焦点图轮播效果
$(function(){ var $next=$(".right"); var $prev=$(".left"); var $list_nu ...
随机推荐
- ssh(sturts2_spring_hibernate) 框架搭建之hibernate1
一.hibernate简单了解: ⑴.hibernate一个java领域里面的一个持久化的ORM框架. 持久化:就是对对象的数据修改,hibernate会把修改的数据同步到数据库中. ORM:Obje ...
- css text-align-last设置末尾文本对齐方式
text-align-last:auto | start | end | left | right | center | justify auto: 无特殊对齐方式. left: 内容左对齐. cen ...
- ASProtect注册码使用教程|ASProtect SKE(加壳脱壳工具) 2.56 汉化注册版
ASProtect 是功能非常完善的加壳.加密保护工具.能够在对软件加壳的同时进行各种保护.如:反调试跟踪.自校验及用密钥加密保护等:还有多种限制使用措施,如:使用天数限制.次数限制及对应的注册提醒信 ...
- jQuery.noConflict()
转载:http://blog.163.com/mjuxiaom@126/blog/static/13397047120117324320858/ 运行这个函数将变量$的控制权让渡给第一个实现它的那个库 ...
- Android 自动补全提示输入AutoCompleteTextView、 MultiAutoCompleteTextView
以在搜索框搜索时,自动补全为例: 其中还涉及到一个词,Tokenizer:分词器,分解器. 上效果图: MainActivity.java: package com.joan.testautocoml ...
- Deep learning:四十三(用Hessian Free方法训练Deep Network)
目前,深度网络(Deep Nets)权值训练的主流方法还是梯度下降法(结合BP算法),当然在此之前可以用无监督的方法(比如说RBM,Autoencoder)来预训练参数的权值,而梯度下降法应用在深度网 ...
- AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
- Spring Boot异常处理详解
在Spring MVC异常处理详解中,介绍了Spring MVC的异常处理体系,本文将讲解在此基础上Spring Boot为我们做了哪些工作.下图列出了Spring Boot中跟MVC异常处理相关的类 ...
- oracle创建表相关
--创建表 create table person( id number primary key, name ), birth date ); --创建序列 create sequence perso ...
- 为什么是梯度下降?SGD
在机器学习算法中,为了优化损失函数loss function ,我们往往采用梯度下降算法来进行优化.举个例子: 线性SVM的得分函数和损失函数分别为: ...