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 ...
随机推荐
- WP中的语音识别(下):语音指令
除了系统集成的可以用于搜索.启动应用程序等语音命令外,在我们的应用程序内部还能自己定义语音指令,使得我们的APP能与语音操控结合得更加完全. 语音指令是通过一个XML文件来定义的.比如,咱小舅子开了家 ...
- windows下zookeeper伪集群搭建
下载 http://www.apache.org/dyn/closer.cgi/zookeeper/ 解压 D:\Java\soft\zookeeper-3.4.6 伪集群 1.在 \zookeepe ...
- JS实现单击按钮后弹出新的窗口页面
点击按钮后,弹出指定大小的页面窗口. 效果图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- Java生成BASE64编码
1.所需jar包: BASE64Encoder.jar 2.在导包过程中,可能会出现工程不识别的情况.即:不能找到BASE64Encoder的jar包.此时,可以有两种方法解决这个问题: a. 只需 ...
- 使用Html5+C#+微信 开发移动端游戏详细教程 :(三)使用html5引擎搭建游戏框架
教程里的案例我们是通过H5游戏引擎开发,目前H5的游戏引擎比较好用的是白鹭,不过对于新手来说白鹭的开发环境和工具使用过于复杂,这里推荐一个国内大神编写的游戏引擎:lufylegend. 直接在页面引入 ...
- Halcon与opencv格式的转换
IplImage* ImageProcess::HImageToIplImage(Hobject &Hobj) { IplImage* pImage; HTuple htChannels; c ...
- Java进阶之reflection(反射机制)——反射概念与基础
反射机制是Java动态性之一,而说到动态性首先得了解动态语言.那么何为动态语言? 一.动态语言 动态语言,是指程序在运行时可以改变其结构:新的函数可以引进,已有的函数可以被删除等结构上的变化.比如常见 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 前端自动化开发之grunt
上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天 ...
- 利用Navigation Timing测量页面加载时间
最近在看一本名为<web性能实践日志>的书籍,其中第十三章"网络计时"中介绍了一种比较新的计算页面各部分加载时间方法,这也是W3C Web性能工作小组正在做的事情,接下 ...