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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jquery预加载图片的方法
May 27 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
JavaScript中的this基本问题实例小结
Mar 09 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
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
webpack5 联邦模块介绍详解
2020/07/08 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
少先队学雷锋活动月总结
2014/03/09 职场文书
完整版商业计划书
2014/09/15 职场文书
拆迁委托协议书
2014/09/15 职场文书
实习单位证明范例
2014/11/17 职场文书
2014年减负工作总结
2014/12/10 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
大学生就业意向书
2015/05/11 职场文书
党组织结对共建协议书
2016/03/23 职场文书
nginx rewrite功能使用场景分析
2022/05/30 Servers