首页» 沉思录 » Unslider – 轻量的响应式 jQuery 滑动插件

Unslider – 轻量的响应式 jQuery 滑动插件

in 沉思录 | 评论关闭

Unslider — 一个超小的 jQuery 轮播(slider) 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。

  • 跨浏览器Unslider已经在所有最新的浏览器上测试过了,并且对那些老旧的浏览器也能很出色的降级处理。
  • 支持键盘导航如果需要,可以加入键盘方向键导航。试一试左右方向键吧!
  • 自动调整高度并不是每个幻灯片都很规范,Unslider能够自动调整高度。
  • Yep,他还支持响应式布局如今哪个网站还不支持响应式布局就已经非常OUT了。Unslider帮你轻松搞定!

如何使用Unslider?
引入 jQuery 和 Unslider:

<script src=”//code.jquery.com/jquery-latest.min.js”></script>
<script src=”//unslider.com/unslider.js”></script>

 编写 HTML 无序列表:

<div class="banner">
    <ul>
        <li>This is a slide.</li>
        <li>This is another slide.</li>
        <li>This is a final slide.</li>
    </ul>
</div>

使用 CSS 美化外观:

.banner { overflow: auto; position:relative;}
 .banner ul { list-style: none; margin: 0px;left: 0}
 .banner ul li { float: left; z-index: -1}
.banner .txt{ position: absolute;
left: 40px;
bottom: 20px;
z-index: 5;
background-color: #fff}
.banner .dots { position: absolute;
right: 15px;
bottom: 15px;
z-index: 5;
margin: 0;
list-style: none;}
.banner .dots li { display: inline-block; width: 10px; height: 10px; margin: 0 4px; text-indent: -999em; border: 2px solid #fff; border-radius: 6px; cursor: pointer; opacity: .4; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; }
.banner .dots li.active { background: #ccc; opacity: 1; }

d调用插件:

<script type=”text/javascript”>
$(document).ready(function(){$(‘.banner’).unslider({
speed: 500, // 滚动速度
delay: 1000, // 动画延迟
complete: function() {}, // 动画完成的回调函数
keys: true, // 启动键盘导航
dots: true, // 显示点导航
fluid: false // 支持响应式设计
})
});
</script>

还没有评论哦,赶快抢沙发~~

评论关闭了.