原生js轮播特效

前端之家收集整理的这篇文章主要介绍了原生js轮播特效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评:

首先css代码

属性,块元素可修改这块 } #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代码

最后js代码

获取按钮的index属性值 var offset = -400*(myIndex-index); //根据属性值 计算偏移量 animate(offset) //轮播动画 index = myIndex; // 改变索引值 showBtn(); //显示状态按钮 } } function showBtn () { for (var i=0;i0 && 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.onmouSEOver=stop; lunBo.onmouSEOut=play; }

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

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

原文链接:https://www.f2er.com/js/39218.html

猜你在找的JavaScript相关文章