欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 幻灯片和轮播图 > 简单的jQuery响应式轮播图插件

简单的jQuery响应式轮播图插件

简单的jQuery响应式轮播图插件

关键词:响应式,轮播图,jquery轮播图,jquery轮播图插件,jquery轮播图简洁写法,jquery实现轮播,jquery图片轮播代码,css3轮播图代码,jquery库,lunbo

描述:这是一款简单易用的jQuery响应式轮播图插件。该jquery轮播图插件支持前后导航按钮和圆点导航按钮,显示轮播进度条,并根据容器尺寸自动调节大小,最重要的是使用非常简单。

简要教程

这是一款简单易用的jQuery响应式轮播图插件。该jquery轮播图插件支持前后导航按钮和圆点导航按钮,显示轮播进度条,并根据容器尺寸自动调节大小,最重要的是使用非常简单。

使用方法

在页面中引入jquery以及main.js文件。

<script src="jquery.min.js"></script>
<script src="main.js"></script>
                
HTML结构

该jQuery响应式轮播图的基本HTML结构如下:

<div class="trent-slider">
  <div class="t-slide current-t-slide">
    <img src="img/bolt.jpg" alt="" />
  </div>
  <div class="t-slide">
    <img src="img/um.jpg" alt="" />
  </div>
  <div class="t-slide">
    <img src="img/fire.jpg" alt="" />
  </div>
  <div class="t-slide">
    <img src="img/boat1.jpg" alt="" />
  </div>
  <div class="t-slider-controls">
    <div class="arrow right-arrow">
      <div class="arrow-container">
        <div class="arrow-icon"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
      </div>
    </div>
    <div class="arrow left-arrow">
      <div class="arrow-container">
        <div class="arrow-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
      </div>
    </div>
    <div class="t-load-bar">
      <div class="inner-load-bar"></div>
    </div>
    <div class="t-dots-container">
      <div class="t-slide-dots-wrap">
        <div class="t-slide-dots">

        </div>
      </div>
    </div>
  </div>
</div>
                
CSS样式

然后为该jQuery轮播图添加下面的CSS样式代码。

@keyframes load {0% {width:0%;} 100% {width:100%;}}
.trent-slider {width:100%;position:relative;overflow:hidden;}
.t-slide {position:absolute;left:0;right:0;bottom:0;top:0;transition:.65s;}
.t-slide img {width:100%;height:100%;}
.t-slider-controls {position:absolute;top:0;bottom:0;left:0;right:0;} 
.t-slider-controls .arrow {min-height:100%;width:50px;position:relative;transition:.25s;}
.t-slider-controls .arrow:hover {cursor:pointer;}
.t-slider-controls .right-arrow {float:right;} .t-slider-controls .left-arrow {float:left;}
.t-slider-controls .arrow .arrow-container {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;}
.t-slider-controls .arrow .arrow-container .arrow-icon {position:relative;width:42px;height:42px;color:#fafafa;border-radius:50%;}
.t-slider-controls .arrow .arrow-container .arrow-icon i {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.t-slider-controls .t-load-bar {width:100%;height:5px;}
.t-slider-controls .t-load-bar .inner-load-bar {background:rgba(200,200,200,0.65);height:100%;}
.t-slider-controls .t-dots-container {position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:20px;min-width:350px;}
.t-slider-controls .t-slide-dots-wrap {height:100%;width:100%;position:relative;}
.t-slider-controls .t-slide-dots {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:table;content:"";clear:both;}
.t-slider-controls .t-slide-dots .t-dot {background:#fafafa;width:8px;height:8px;margin:5px;float:left;border-radius:50%;transition:.65s;} 
.t-slider-controls .t-slide-dots .t-dot.current-dot,.t-slider-controls .t-slide-dots .t-dot:hover {transform:scale(1.65);cursor:pointer;}
/*close slider css*/
@media screen and (min-width:768px) {.t-slider-controls .arrow:hover {background:rgba(0,0,0,0.32);}}                 
                

该jQuery轮播图插件的github地址为:https://github.com/tmac9494/JqueryUpdatedSlider

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_lunbo/7922.html

 在线演示  免费下载
编号:201802130000007922
大小:0.24MB
上传时间:2018-02-13 17:02
素材由用户"wangchenan520"上传分享。

标签

最新推荐素材

与简单的jQuery响应式轮播图插件相关的素材

.