js实现轮播图的两种方式(构造函数、面向对象)
本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下
1、构造函数
*{margin:0;padding:0;} #wrap{ width:500px; height:360px; margin:100pxauto; position:relative; } #pic{ width:500px; height:360px; position:relative; } #picimg{ width:100%; height:100%; position:absolute; top:0; left:0; display:none; } #tab{ width:105px; height:10px; position:absolute; bottom:10px; left:50%; margin-left:-50px; } #tabulli{ width:10px; height:10px; margin:05px; background:#bbb; border-radius:100%; cursor:pointer; list-style:none; float:left; } #tabulli.on{background:#f60;} #btndiv{ width:40px; height:40px; position:absolute; top:50%; margin-top:-20px; color:#fff; background:#999; background:rgba(0,0,0,.5); font-size:20px; font-weight:bold; font-family:'Microsoftyahei'; line-height:40px; text-align:center; cursor:pointer; } #btndiv#left{left:0;} #btndiv#right{right:0;}