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

 更新时间:2015年04月12日 16:36:21   投稿:hebedich  
这篇文章主要介绍了jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效,效果非常的棒,而且兼容性也很好,推荐给小伙伴们

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

支持响应式的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> 

查看DEMO   下载

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

相关文章

  • Jquery和BigFileUpload实现大文件上传及进度条显示

    Jquery和BigFileUpload实现大文件上传及进度条显示

    这篇文章主要介绍了Jquery和BigFileUpload实现大文件上传及进度条显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jQuery 3.0十大新特性

    jQuery 3.0十大新特性

    在2016年6月迎来了jquery3.0最终版,jquery3.0有哪些新特征呢?很多朋友不是很清楚,下面小编给大家带来了jQuery 3.0十大新特性,感兴趣的朋友一起看下吧
    2016-07-07
  • 浅谈jQuery构造函数分析

    浅谈jQuery构造函数分析

    jquery的构造函数很好的运用的javascript的充分利用了JavsScript语言的动态性——对行参的类型和个数没有的严格要求,以至于一个函数可以实现多种功能需求,也为JavaScript语言的多态性提供了基础,在这个构造函数中,提供了六种不同的调用格式(根据官方API文档)
    2015-05-05
  • 对于jQuery性能的一些优化建议

    对于jQuery性能的一些优化建议

    这篇文章主要介绍了对于jQuery性能的一些优化建议,jQuery是当下人气最高的JavaScript库,需要的朋友可以参考下
    2015-08-08
  • JQuery中如何传递参数如click(),change()等具体实现

    JQuery中如何传递参数如click(),change()等具体实现

    有个需求让两个select中option相互转换,这个作业就是给几个按钮添加click()事件接下来为大家介绍下如何在click(),change()传递参数
    2013-04-04
  • Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例

    Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例

    仿淘宝京东多条件筛选可自行结合ajax加载,使用Jquery简单实现,具体如下,喜欢的朋友可以参考下
    2013-08-08
  • jquery实现在光标位置插入内容的方法

    jquery实现在光标位置插入内容的方法

    这篇文章主要介绍了jquery实现在光标位置插入内容的方法,涉及jQuery功能的扩展技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • jQuery常用选择器详解

    jQuery常用选择器详解

    这篇文章主要为大家详细介绍了jQuery常用选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • jquery实现百叶窗效果

    jquery实现百叶窗效果

    本文主要分享了jquery实现百叶窗效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 解析Jquery取得iframe中元素的几种方法

    解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下
    2013-07-07

最新评论