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 ...
随机推荐
- 初了解JS设计模式,学习笔记
什么是设计模式. 回答这个问题,往往我们得先知道我们为什么需要设计模式,正是因为有需求才会有设计模式,难道不是吗? 我们为什么需要设计模式. 如果没有按照设计模式去写,你的代码很可能是乱无肆忌写的,也 ...
- KendoUI系列:DropDownList
1.基本使用 1>.创建Input <input id="dropDownList" /> <link href="@Url.Content(&q ...
- JAVA--网络编程(UDP)
上午给大家简单介绍了一下TCP网络通信的知识,现在就为大家补充完整网络编程的知识,关于UDP的通信知识. UDP是一种不可靠的网络协议,那么还有什么使用价值或必要呢?其实不然,在有些情况下UDP协议可 ...
- App乱世,3721离我们有多远
[总结]根据众多网友的评论,看来还是WP比较给力,IOS太贵...会对手机进行优化,安卓还行,如果给中老年人用WP比较好 声明:合理讨论,禁止骂人言论,本人也不是5毛党,发表下个人看法而已. 快过年了 ...
- Android自动化测试之Monkeyrunner学习笔记(一)
Android自动化测试之Monkeyrunner学习笔记(一) 因项目需要,开始研究Android自动化测试方法,对其中的一些工具.方法和框架做了一些简单的整理,其中包括Monkey.Monkeyr ...
- 使用git提交中删除idea
https://segmentfault.com/q/1010000000720031 http://www.tuicool.com/articles/a6Nf63F 先有项目,然后分享至github ...
- maven中使用junit老是找不到包
如题,烦恼好久,突然看到scope一直是test,改成compile就好了. compile (编译范围) compile是默认的范围:如果没有提供一个范围,那该依赖的范围就是编译范围.编译范围依赖在 ...
- 页面置换算法 - FIFO、LFU、LRU
缓存算法(页面置换算法)-FIFO. LFU. LRU 在前一篇文章中通过leetcode的一道题目了解了LRU算法的具体设计思路,下面继续来探讨一下另外两种常见的Cache算法:FIFO. LFU ...
- 开源通信(C#)__
GitHub中的README文件,使用markdown格式的文件. 下面简单介绍下相关语法: 大标题: =================================== 大标题一般显示工程名,你 ...
- EasyUI datagrid 行编辑
一.HTML: <div class="info"> <div class="info_tt"> <span class=&quo ...