分享一个响应式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)整理分享,欣赏作品版权均归原作者所有,仅供学习交流。点击上方图标与好友分享!
发表回复
要发表评论,您必须先登录。