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 相关文章推荐
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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重定向的3种方式
2013/03/07 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
Python解析nginx日志文件
2015/05/11 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
煤矿班组长的职责
2013/12/25 职场文书
房地产融资计划书
2014/01/10 职场文书
职工运动会邀请函
2014/01/19 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
乳制品整治工作方案
2014/05/29 职场文书
工作证明英文模板
2014/10/21 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python