jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效


Posted in Javascript onApril 12, 2015

支持响应式的jQuery焦点图片无缝滚动切换特效插件Elastislide,非常漂亮的图片轮播特效插件,支持左右轮播图片、上下轮播图片、自适应移动端显示,支持众多的参数配置:orientation :'horizontal'(水平切换),speed : 500(切换速度,单位毫秒),easing : 'ease-in-out'(动画效果), minItems : 3(默认展示的数量)等,浏览器兼容方面:IE8+、以及较现代浏览器,不介意低版本浏览器的可以使用,当然也可以使用到移动端触屏。

jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效

支持响应式的jQuery焦点图片无缝滚动切换特效插件Elastislide

使用方法:

1.加载jQuery和插件

<script type="text/javascript" src="libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquerypp.custom.js"></script> 
<script type="text/javascript" src="js/jquery.elastislide.js"></script> 
<link rel="stylesheet" type="text/css" href="css/elastislide.css" />

2.HTML内容

<ul id="carousel" class="elastislide-list"> 
<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li> 
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li> 
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li> 
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li> 
<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li> 
<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li> 
</ul>

3.函数调用

<script type="text/javascript"> 
$(document).ready(function() { 
  $( '#carousel' ).elastislide(); 
}); 
</script>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
Node调用Java的示例代码
Sep 20 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 #Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 #Javascript
jQuery实现简单二级下拉菜单
Apr 12 #Javascript
纯JS实现旋转图片3D展示效果
Apr 12 #Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 #Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 #Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 #Javascript
You might like
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP学习笔记之session
2018/05/06 PHP
asp 取文本框名称代码
2008/12/02 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
python实现飞船大战
2020/04/24 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
项目采购员岗位职责
2014/04/15 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
团代会邀请函
2015/02/02 职场文书
2015年体育部工作总结
2015/04/02 职场文书
卡特教练观后感
2015/06/08 职场文书
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS
win10搭建配置ftp服务器的方法
2022/08/05 Servers