unslider使用方法1

網站上banner對應的css代碼

<!-- banner開始 --> <section> <div class="banner"> <ul> <li style="background-color:#5CC9E0; text-align: center;"> <img src="<{$site_info.s_url}>/theme/images/banner1.jpg" /> <h1>企業逼格靠網站，網站逼格靠兼容<br /><small>懶人出品的網站，在電腦、平板、手機、微信，都正常瀏覽！</small></h1> </li> <li style="text-align: center;"> <img src="<{$site_info.s_url}>/theme/images/banner2.jpg" /> <h1>企業400熱線電話<br /><small>一個號碼，一致對外！</small></h1> </li> <!-- <{foreach from=$index_img item=con name=foo}> <li > <a href="<{$con.link}>" title="<{$con.title}>"><img src="<{$site_info.s_url}>/attached/<{$con.img}>" alt="<{$con.title}>" /></a> </li> <{/foreach}> --> </ul> <a href="javascript:void(0);" class="unslider-arrow prev">&#xe628;</a> <a href="javascript:void(0);" class="unslider-arrow next">&#xe627;</a> </div> <script type="text/javascript" src="//unslider.com/unslider.js"></script> <script type="text/javascript"> $(function() { var unslider = $('.banner').unslider({ speed: 500, // 動畫的滾動速度，數字越大越慢 delay: 8000, // 每一個滑塊的停留時間 complete: function() {}, // 每一個滑塊動畫完成時調用的方法 keys: true, // 是否支持鍵盤 dots: true, // 是否顯示翻頁圓點 fluid: true // 支持響應式設計（有可能會影響到響應式） }); // banner箭頭部分 $('.unslider-arrow').click(function() { var fn = this.className.split(' ')[1]; unslider.data('unslider')[fn](); }); }); </script> </section> <!-- banner結束 -->

網站上banner對應的css代碼

.banner { position: relative; overflow: auto; } .banner ul { padding:0; margin:0; } .banner li { list-style: none; } .banner ul li { float: left; } /*--banner中的圓點部分 --*/ .banner .dot { -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); } .banner .dots { position: absolute; left: 0; right: 0; bottom: 10px; width: 100%; text-align: center; } .banner .dots li { display: inline-block; *display: inline; zoom: 1; width: 10px; height: 10px; line-height: 10px; margin: 0 4px; text-indent: -999em; *text-indent: 0; 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: #fff; opacity: 1; } /*用到了houweb.css裏的網絡字體,讓左右箭頭顯示出來，注意下！*/ .banner .unslider-arrow { font-family:"lanren2016"; font-size:50px; font-style:normal; position: absolute; width: 60px; height: 60px; top:50%; margin-top: -30px; text-decoration: none; } .banner .prev { left: 15px; } .banner .next { right: 15px; }