浙江 杭州

jQuery响应式水平滚动旋转木马插件

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2017-05-25

人气5912

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


Carousel.js是一款非常实用的jQuery响应式水平滚动旋转木马插件。它使用简单,样式可以完全自定义,并且会随屏幕的大小自适应容器的宽度和高度。

使用方法

使用该旋转木马插件要引入jQuery和jquery-carousel.js文件。

<script src="js/jquery-1.11.0.min.js"></script>
<script src="jquery-carousel.js"></script>                
              
HTML结构

该旋转木马的基本HTML结构如下:

<div id="slider-carousel">
  <div class="wrapper-setas">
    <a href="#" class="seta-dir setaDir">
      <em class="sprite seta-pag-dir-md"></em>
    </a> 
    <a href="#" class="seta-esq setaEsq">
      <em class="sprite seta-pag-esq-md"></em>
    </a>
    <div class="clear"></div>
  </div>

  <!-- Slider content -->
  <div id="container-slider-carousel" class="container">
    <div id="content-silder-carousel" class="content">
      <div class="wrapper-itens">
        <div class="item"><span><img src="l.jpg" alt="" class="img-responsive"></span></div>
        <div class="item"><span><img src="2.jpg" alt="" class="img-responsive"></span></div>
        <div class="item"><span><img src="3.jpg" alt="" class="img-responsive"></span></div>
        <div class="item"><span><img src="4.jpg" alt="" class="img-responsive"></span></div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</div>
              
CSS样式

需要为该旋转木马插件添加下面的必要的CSS样式,其他的CSS样式可以根据需要自定义。

.clear {
  clear: both !important;
  float: none !important;
  margin: 0px !important;
  padding: 0px !important;
  height: 0px !important;
  width: 0px !important
}

.img-responsive {
  height: auto;
  width: 100%;
}

#slider-carousel {
  position: relative;
  width: 100%;
  padding: 10px 0 0 0;
  margin-bottom: 5px;
}

#container-slider-carousel {
  width: 620px;
  position: relative;
  overflow: hidden;
  height: auto;
}

#content-silder-carousel {
  width: 5000px;
  position: relative;
  left: 0;
}

#content-silder-carousel .item {
  width: 200px;
  float: left;
  background-color: #CCC;
  margin-right: 10px;
}

#slider-carousel .wrapper-setas { margin: 0 0 10px 0; }

#slider-carousel .wrapper-setas a {
  float: right;
  margin-left: 10px;
}      
              
初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该旋转木马插件。

$("#slider-carousel").carousel({

  // 回调函数
  activate: function(){}, 

  // 动画的速度
  timerAnimSlide:400, 

  // 无限循环模式
  infinite:true, 

  // 点击左右箭头导航按钮时移动的旋转木马项的数量
  itensMove:1,

  // 旋转木马项的宽度
  resizeItem:{width:50}, 

  // 旋转木马的最小宽度
  responsive:{minWidth:645}
  
}
              

查看演示
下载资源:2
下载资源
错误提交:

格式:zip 大小:180.72KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1831.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery响应式水平滚动旋转木马插件

我当前G币余额:0 已下载次数:2

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有9 评论)

1 2