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

前端技术 2023/09/07 JavaScript

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

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

本文地址：https://www.stayed.cn/item/18386

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案