轮播php js代码,分享用原生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

<

>

最后js代码window.οnlοad=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[i].οnclick=function () {

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[i].className='';

}

btn[index-1].className='on';

}

prev.οnclick=function () { //上一页事件

if (animated) { //如果是动画状态 直接返回解决bug

return;

}

if (index==1) {

index =btn.length;

} else{

index-=1;

}

animate(400);

showBtn();

}

next.οnclick=function () {

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)) { //通过条件判断到它是否还要继续进行动画

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)

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.οnmοuseοver=stop;

lunBo.οnmοuseοut=play;

}

以上是所有代码，欢迎指点交流！

【相关推荐】