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; }