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 相关文章推荐
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
JqGrid web打印实现代码
May 31 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
Vue切换Tab动态渲染组件的操作
Sep 21 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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
微信小程序组件 marquee实例详解
2017/06/23 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python实现的简单算术游戏实例
2015/05/26 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
Python 日期与时间转换的方法
2020/08/01 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
孝老爱亲模范事迹材料
2014/05/25 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
销售业务员岗位职责
2015/02/13 职场文书
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android