原生js如何实现轮播特效
这篇文章主要为大家展示了“原生js如何实现轮播特效”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“原生js如何实现轮播特效”这篇文章吧。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、网络空间、营销软件、网站建设、下花园网站维护、网站推广。
首先css代码
a{text-decoration:none;color:#3DBBF5;} *{ margin: 0; padding: 0; } .wrapper{ width: 400px; height: 300px; margin: 100px auto; } #lunbo{ position: relative; overflow: hidden; } #list{ position: relative; white-space: nowrap; // 这块用行元素模拟,所以才用该属性,块元素可修改这块 } #list span{ display: inline-block; width: 400px; height: 300px; text-align: center; line-height: 300px; font-weight: bold; font-size: 100px; color: #fff; } #buttons{ position: absolute; bottom: 0; text-align: center; width: 100%; height: 40px; line-height: 40px; } #buttons span{ display: inline-block; width: 15px; height: 5px; background: #fff; margin: 0 10px; cursor: pointer; transition: all .5s; } #buttons span.on{ height: 20px; } .arrow{ position: absolute; top: 50%; transform: translateY(-50%); font-size: 80px; font-weight: bold; color: #fff; opacity: .3; transition: all .5s; } .wrapper:hover .arrow{ opacity: 1; } #prev{ left: 10px; } #next{ right: 10px; }
然后HTML代码
5123451