这是一款简单易用的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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!