Ideal-image-slider 幻灯片
在线实例
实例演示 默认效果
实例演示 淡入淡出
实例演示 带链接
实例演示 项目导航
实例演示 带标题描述
实例演示 回调函数
实例演示 自定义切换
使用方法
- <div class="demo">
- <div id="slider">
- <img src="/api/jq/5733e32bf23bb/img/1.jpg" data-src-2x="/api/jq/5733e32bf23bb//img/1@2x.jpg" alt="">
- <img data-src="/api/jq/5733e32bf23bb/img/2.jpg" data-src-2x="/api/jq/5733e32bf23bb//img/2@2x.jpg" alt="">
- <img data-src="/api/jq/5733e32bf23bb/img/3.jpg" data-src-2x="/api/jq/5733e32bf23bb//img/3@2x.jpg" alt="">
- <img data-src="/api/jq/5733e32bf23bb/img/4.jpg" data-src-2x="/api/jq/5733e32bf23bb//img/4@2x.jpg" alt="">
- </div>
- </div>
- <script src="/api/jq/5733e32bf23bb/js/ideal-image-slider.min.js"></script>
- <script src="/api/jq/5733e32bf23bb/extensions/bullet-nav/iis-bullet-nav.js"></script>
- <script>
- var slider = new IdealImageSlider.Slider('#slider');
- slider.addBulletNav();
- slider.start();
- </script>
Ideal-image-slider 幻灯片的更多相关文章
- jQuery Devrama Slider 幻灯片
Devrama Slider 是个图像滑块,带有许多非常有趣的特性. 它不仅支持图像还支持 HTML 内容. 响应式 方便 CSS3 转换 转换效果 进度条 高级的预加载和延迟加载 CSS 自定义 用 ...
- Ideal-image-slider 幻灯片实例演示
链接:http://zaixianshouce.iteye.com/blog/2316300 http://www.shouce.ren/study/api/s/jq--5733e32bf23bb-- ...
- 【jquery】幻灯片效果
闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...
- fullPage.js学习笔记
中秋节,一个人呆着,挺无聊的,还是学习最有趣,不论是什么,开阔视野都是好的. 参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看 ...
- FullPage.js全屏滚动插件的配置项、方法和回调函数
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...
- Github资源汇集
Github资源汇集 突然发现申请博客园已经两年有余,没有发表过一篇文章,十分惭愧.言归正传,先分享一下两年来收集的部分编程资源,大部分为Github上的项目.虽然网上这样的分享已不在少数,但不如我理 ...
- JQuary中的FullPage属性的用法
$(document).ready(function(){ //常用方法 //$.fn.fullpage.moveSectionUp() //向上滚动一页 //$.fn.fullpage.m ...
- FullPage.js全屏滚动插件解说
1.主要功能 1).支持鼠标滚动 2).多个回调函数 3).支持手机.平板触屏事件 4).支持css3动画 5).支持窗口缩放 6).窗口缩放时自动调整 7).可设置滚动宽度.背景颜色.滚动速度.循环 ...
- 挂号平台首页开发(UI组件部分)
JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...
- Elastic Image Slider 带缩略图功能的幻灯片
今天我们要为您展示如何创建一个简单的弹性幻灯片,带有缩略图预览功能.Elastic Image Slider 这款幻灯片能够自动调整以适应到其父容器,我们可以通过幻灯片使用缩略图预览或幻灯片的自动播放 ...
随机推荐
- iOS开发-Xcode升级后插件失效解决办法
打开terminal,输入如下命令: | xargs -I{} defaults write {} DVTPlugInCompatibilityUUIDs -array-add `defaults r ...
- 华为 HG8245C 光猫 修改无线用户数限制+hw_ctree.xml 文件解密
这个操作方法是 从网上其他人提供的方法 和我一个朋友总结出来的,我只是负责整理,并实地在我自己的光猫上操作成功了 风险提示 :刷机有风险,操作需谨慎, 备份备份备份! 俺家,俺的新家是电信光纤接入, ...
- Ubuntu 13.04 双显卡安装NVIDIA GT 630M驱动
[日期:2013-05-24] Linux系统:Ubuntu 13.04 安装 bumblebee 以管理双显卡,下面命令会自动安装NVIDIA显卡驱动 sudo add-apt-reposito ...
- 【eoe 6】ActionBar的使用
一. Action Bar 一般位于屏幕顶部,包括四个可操作区域: 应用图标或LOGO区域,用于视图控制的Spinner下拉菜单或TAB控件区域, Action button(也称为Action It ...
- 解决方法:64位系统-未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序
win7或win8 64位下调试程序,出现这样的错误提示:未在本地计算机上注册 Microsoft.Jet.OLEDB.4.0 提供程序 解决方法如下: 方法一:“设置应用程序池默认属性”/“常规”/ ...
- struts2完全捕获404错误的方法
目前在做一个网络应用程序,struts2 + spring + hibernate,服务器是tomcat.希望用户在IE地址栏乱敲的时候,所敲入的所有未定义的URL都能被程序捕捉到,然后转到一个自制的 ...
- js替换指定字符串
// var a = "212"; // var b = []; // for(var i=0;i<a.length;i++){ // if(a[i]=="1&qu ...
- ruby -- 进阶学习(二)paperclip上传图片
Need to add image attachments to a model? See how with paperclip in this episode. 在命令行输入: rails g pa ...
- 清除linux缓存命令
命令 #sync #echo 3 > /proc/sys/vm/drop_caches 查看内存情况: # more /proc/meminfo Kernels 2.6.16 and newer ...
- Network - Tcpdump
Tcpdump homepage - tcpdump wiki - tcpdump 常用格式 tcpdump -i eth<网卡号> port <端口号> -s0 -w 示例: ...