幻灯片/轮播

简单轻量jQuery响应式轮播图插件

阿里云


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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <script src="jquery.min.js"></script>
  2. <script src="main.js"></script>

HTML 结构

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

  1. <div class="trent-slider">
  2.   <div class="t-slide current-t-slide">
  3.     <img src="img/bolt.jpg" alt="" />
  4.   </div>
  5.   <div class="t-slide">
  6.     <img src="img/um.jpg" alt="" />
  7.   </div>
  8.   <div class="t-slide">
  9.     <img src="img/fire.jpg" alt="" />
  10.   </div>
  11.   <div class="t-slide">
  12.     <img src="img/boat1.jpg" alt="" />
  13.   </div>
  14.   <div class="t-slider-controls">
  15.     <div class="arrow right-arrow">
  16.       <div class="arrow-container">
  17.         <div class="arrow-icon"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
  18.       </div>
  19.     </div>
  20.     <div class="arrow left-arrow">
  21.       <div class="arrow-container">
  22.         <div class="arrow-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
  23.       </div>
  24.     </div>
  25.     <div class="t-load-bar">
  26.       <div class="inner-load-bar"></div>
  27.     </div>
  28.     <div class="t-dots-container">
  29.       <div class="t-slide-dots-wrap">
  30.         <div class="t-slide-dots">
  31.  
  32.         </div>
  33.       </div>
  34.     </div>
  35.   </div>
  36. </div>

CSS 样式

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

  1. @keyframes load {0% {width:0%;} 100% {width:100%;}}
  2. .trent-slider {width:100%;position:relative;overflow:hidden;}
  3. .t-slide {position:absolute;left:0;right:0;bottom:0;top:0;transition:.65s;}
  4. .t-slide img {width:100%;height:100%;}
  5. .t-slider-controls {position:absolute;top:0;bottom:0;left:0;right:0;} 
  6. .t-slider-controls .arrow {min-height:100%;width:50px;position:relative;transition:.25s;}
  7. .t-slider-controls .arrow:hover {cursor:pointer;}
  8. .t-slider-controls .right-arrow {float:right;} .t-slider-controls .left-arrow {float:left;}
  9. .t-slider-controls .arrow .arrow-container {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;}
  10. .t-slider-controls .arrow .arrow-container .arrow-icon {position:relative;width:42px;height:42px;color:#fafafa;border-radius:50%;}
  11. .t-slider-controls .arrow .arrow-container .arrow-icon i {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
  12. .t-slider-controls .t-load-bar {width:100%;height:5px;}
  13. .t-slider-controls .t-load-bar .inner-load-bar {background:rgba(200,200,200,0.65);height:100%;}
  14. .t-slider-controls .t-dots-container {position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:20px;min-width:350px;}
  15. .t-slider-controls .t-slide-dots-wrap {height:100%;width:100%;position:relative;}
  16. .t-slider-controls .t-slide-dots {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:table;content:"";clear:both;}
  17. .t-slider-controls .t-slide-dots .t-dot {background:#fafafa;width:8px;height:8px;margin:5px;float:left;border-radius:50%;transition:.65s;} 
  18. .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;}
  19. /*close slider css*/
  20. @media screen and (min-width:768px) {.t-slider-controls .arrow:hover {background:rgba(0,0,0,0.32);}}

Github 地址:https://github.com/tmac9494/JqueryUpdatedSlider

简单轻量 jQuery 响应式轮播图插件

已有 538 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!