Unslider – 响应式轮播Banner代码(自定义参数、支持键盘方向键、带切换按钮)

Unslider – 响应式轮播Banner代码(自定义参数、支持键盘方向键、带切换按钮) - 任刚 · Ren Gang 世界设计 · 设计世界
分享一个响应式jQuery Banner插件 – Unslider,下面是方法和代码。

第一步、引入jQuery库及Unslider插件js文件:

<script type="text/javascript" src="//www.huawenonline.com/js/jquery-latest.min.js"></script><script type="text/javascript" src="//www.huawenonline.com/js/unslider.min.js"></script>

第二步、HTML中添加banner:

</pre>
<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>
<pre>

第三步、附加CSS样式让它看起来更迷人:

.banner { position: relative; overflow: auto; }
    .banner li { list-style: none; }
        .banner ul li { float: left; }

最后,在HTML中激活它

<script type="text/javascript">// <![CDATA[
$(function() {
    $('.banner').unslider();
});
// ]]></script>

当然,你还可以自定义轮播参数

<script type="text/javascript">// <![CDATA[
$(function() {
    $('.banner').unslider({
	speed: 500,               //  幻灯片切换速度(毫秒)
	delay: 3000,              //  每张幻灯片停留时间 (毫秒)
	complete: function() {},  //  当幻灯结束时执行动作
	keys: true,               //  开启键盘支持(左右键切换)
	dots: true,               //  显示原点导航
	fluid: false              //  支持响应式,部分非响应式网站可能不支持
});
});
// ]]></script>

还有,你可以为banner添加一个左右切换的按钮

<!-- The HTML -->
<a class="unslider-arrow prev" href="#">Previous slide</a>
<a class="unslider-arrow next" href="#">Next slide</a>

<!-- And the JavaScript -->
<script type="text/javascript">// <![CDATA[
    var unslider = $('.banner').unslider();

    $('.unslider-arrow').click(function() {
        var fn = this.className.split(' ')[1];

        //  Either do unslider.data('unslider').next() or .prev() depending on the className
        unslider.data('unslider')[fn]();
    });
// ]]></script>

访问unslider性质以及更多:

var slidey = $('.banner').unslider(),
    data = slidey.data('unslider');

//  Start Unslider
data.start();

//  Pause Unslider
data.stop();

//  Move to a slide index, with optional callback
data.move(2, function() {});
//  data.move(0);

//  Manually enable keyboard shortcuts
data.keys();

//  Move to the next slide (or the first slide if there isn't one)
data.next();

//  Move to the previous slide (or the last slide if there isn't one)
data.prev();

//  Append the navigation dots manually
data.dots();

「真诚赞赏,手留余香」

任刚 rengang.com.cn

赞助用于本站维护,手机长按识别二维码。

任刚(rengang.com.cn)整理分享,欣赏作品版权均归原作者所有,仅供学习交流。点击上方图标与好友分享!


发表评论

登 录 注 册