当前位置:主页 > jquery插件 > 轮播图 >

自适应图片轮播插件-CAROUSEL

栏目分类:轮播图   模板编号:JQ00005    发布日期:2017-01-15   来源:网络   浏览次数:次     在线预览
插件描述:今天我要给大家介绍的是一款响应式的图片轮播插件:Carousel。这款插件有一个很赞的特点,当我们改变浏览器的大小的时候,整个图片插件的大小也会随之改变,真正做到了

使用步骤

1、引入以下的js和css文件

<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/elastislide.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src="js/modernizr.custom.17475.js"></script>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/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>

2、在head标签中加入以下js代码,调用Carousel插件

<script type="text/javascript">        
  $(function(){
  
      $( '#carousel' ).elastislide();
  
  })
</script>

3、在body标签中加入以下格式的html代码。每张图片就是一个 li 标签,需要注意的是,前面的3个demo用到的是小图,而第4个demo则用到了小图和大图。大家可以查看自己喜欢的样式的Demo源代码。

<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>
........................
</ul>

参数配置

Carousel为我们提供了一系列参数供我们自定义该插件:

$.Elastislide.defaults = {
    //轮播图片方向,默认值: orientation,可选值: 'horizontal' || 'vertical'
    orientation : 'horizontal',
   
    //滑动速度
    speed : 500,
   
    // 滑动效果
    easing : 'ease-in-out',
   
    // 显示的最少图片
    // 当我们改变浏览器大小的时候,这会保证总会显示最少的图片数
    // (当然除非该参数的值要比图片总数还大)
    minItems : 3,
   
    // 开始时,最左边显示的图片索引
    start : 0,
       
    // 点击每项的回调函数
    onClick : function( el, position, evt ) { return false; },
    onReady : function() { return false; },
    onBeforeSlide : function() { return false; },
    onAfterSlide : function() { return false; }
};

动态添加图片
除了将图片写死在html里面以外,我们还可以动态添加图片到插件容器中,请看下面的例子

 var carousel = $('#carousel').elastislide();
...
  
$('#carousel').append("");
carousel.add();

注意:如果你是使用Elastislide 的垂直布局,那么容器的高度将会根据你要显示几张图片来自动调整高度。

在线演示 立即下载
打赏本站
云盘密码:kf9w
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载