今天就跟大家聊聊有关使用js实现一个简单的无缝轮播效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
创新互联是一家专注于成都网站设计、成都网站制作与策划设计,潜山网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:潜山等地区。潜山做网站价格咨询:028-86922220具体内容如下
*{ margin: 0; padding: 0; } #box{ width: 500px; height: 200px; padding: 5px; margin: 50px auto; border: 1px solid #999999; } .inner{ width: 500px; height: 200px; overflow: hidden; position: relative; } ul,ol{ list-style: none; position: absolute; } ul{ width: 3000px; height: 200px; } li{ float: left; } ol{ right: 20px; bottom: 20px; } ol>li{ width: 25px; height: 25px; line-height: 25px; text-align: center; background-color: #fff; border-radius: 50%; margin-right: 10px; cursor: pointer; } ol>li.current{ background-color: orange; color: white; } .control{ display: none; } .control>span{ position: absolute; top: 50%; margin-top: -20px; display: inline-block; width: 25px; height: 40px; line-height: 40px; background-color: rgba(0,0,0,0.3); color: white; font-size: 20px; cursor: pointer; text-align: center; } .right{ right: 0; }