欢迎光临一流素材网,免积分免费素材下载!
AD

自适应图片轮播插件-CAROUSEL

所属栏目:轮播图/幻灯片更新时间:2016-10-17原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

兼容:Firefox,Chrome,Safari,IE10+

今天我要给大家介绍的是一款响应式的图片轮播插件:Carousel。这款插件有一个很赞的特点,当我们改变浏览器的大小的时候,整个图片插件的大小也会随之改变,真正做到了自适应浏览器的变化。


预览图

width="474" height="300" title="自适应图片轮播插件" alt="自适应图片轮播插件"/>

alt=""/>

alt=""/>


使用步骤

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 的垂直布局,那么容器的高度将会根据你要显示几张图片来自动调整高度。



具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jquery手机端响应式banner图片滚动切换效果

2兼容触屏手机浏览的JS全屏焦点图代码

3jQuery touchSlider全屏图片轮播幻灯焦点图代码

4jquery灯箱画廊插件lightgallery

5jquery轮播焦点图

6js卡片式图片叠加滚动切换代码

7带左右箭头滑动焦点图幻灯片jQuery特效代码

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

10jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

最新更新的

1带缩略图的无限滚动轮播图JS代码swiper4

2exzoom-一款jquery商城商品放大镜插件

3jQuery响应式触屏图片左右滚动代码owl.carousel

4轻量级响应式jQuery轮播图/幻灯片插件-lightslider

5移动端滑动JS响应式轮播图插件

6jQuery倾斜图片切换滚动焦点图幻灯片代码

7jQuery版仿淘宝商城天猫首页多格焦点图效果

8易迅网竖排多格jquery焦点图代码

9jQ索引按钮+缩略图双重切换

10兼容触屏手机浏览的JS全屏焦点图代码