当前位置: 首页 > 工具软件 > Unslider.js > 使用案例 >

unslider.js轮播

淳于健
2023-12-01

unslider.js是一款轻量的轮播插件,下载地址unslider.js


.banner{height: 490px; position: relative; overflow: auto; }
.banner ul li{width:100%; float: left; }
.banner ul li img{width: 100%;}
.banner ol{position: absolute; bottom:50px; left: 45%;}
.banner ol 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 ol .active{background: #fff}


<div class="banner width100">
<ul>
   <li><a href=""><img src="images/lj.jpg" /></a></li>
   <li><a href=""><img src="images/lyq.jpg" /></a></li>
   <li><a href=""><img src="images/xyj_23.jpg" /></a></li>
   <li><a href=""><img src="images/11-23.jpg" /></a></li>
</ul>
</div>


<script src="//unslider.com/unslider.js"></script>
<script type="text/javascript">
$(function() {
    $('.banner').unslider({
    speed: 500,              
delay: 3000,
autoplay: true, 
dots: true, 
    });
});


</script>

 类似资料: