服务平台版微信小程序_原生js轮播特效

2021-01-12 11:13

原生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代码

 div 
 div id="lunbo" 
 div id="list" 
 span 5 /span span 1 /span span 2 /span span 3 /span span 4 /span span 5 /span span 1 /span 
 /div 
 div id="buttons" 
 span index="1" /span 
 span index="2" /span 
 span index="3" /span 
 span index="4" /span 
 span index="5" /span 
 /div 
 a href="javascript:;" id="prev" /a 
 a href="javascript:;" id="next" /a 
 /div 
 /div 

最后js代码

window.onload=function () {
 var lunBo = document.getElementById("lunbo");
 var list = document.getElementById("list");
 var btn = document.getElementById("buttons").getElementsByTagName('span');
 var prev = document.getElementById("prev");
 var next = document.getElementById('next');
 var interval = 3000;
 var timer;
 var index = 1;
 var animated = false;
 for (var i=0;i btn.length;i++) { //按钮加点击事件
 btn[i]. unction () {
 if(this.className=='on') //如果是状态按钮直接返回节约资源
 return
 var myIndex =parseInt(this.getAttribute('index'));//获取按钮的index属性值
 var offset = -400*(myIndex-index); //根据属性值 计算偏移量
 animate(offset) //轮播动画
 index = myIndex; // 改变索引值
 showBtn(); //显示状态按钮
 function showBtn () { 
 for (var i=0;i btn.length;i++) {
 btn[i].className=''; 
 btn[index-1].className='on';
 prev. unction () { //上一页事件
 if (animated) { //如果是动画状态 直接返回解决bug
 return;
 if (index==1) { 
 index =btn.length;
 } else{
 index-=1;
 animate(400); 
 showBtn();
 next. unction () {
 if (animated) {
 return;
 if (index==btn.length) {
 index =1;
 } else{
 index+=1;
 animate(-400);
 showBtn();
 function animate(offset) {
 animated = true; //表示在动画状态
 var newLeft = parseInt(list.style.left) + offset; //计算新的left值
 var time = 400; //设置动画总时间
 var interval = 10; //动画帧时间
 var speed = offset/(time/interval); //每帧运动距离
 function go () { 
 if ((speed 0 parseInt(list.style.left) newLeft) || (speed 0 parseInt(list.style.left) newLeft)) { //通过条件判断到它是否还要继续进行动画
 list.style.left = parseInt(list.style.left) + speed +'px';
 setTimeout(go,interval) 
 } else{
 animated = false; //动画状态结束
 list.style.left = newLeft + 'px'; //现在的位移
 if (parseInt(list.style.left) -2000) { // 辅助假图
 list.style.left = -400 + 'px';
 } else if( parseInt(list.style.left) -400){
 list.style.left = -2000 + 'px';
 go();
 function play () { 
 timer = setTimeout(function () {
 next.onclick();
 play();
 },interval)
 play();
 function stop () {
 clearTimeout(timer);
 lunBo. top;
 lunBo.onmouseout=play;

以上是所有代码,欢迎指点交流!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

020-66889888