|
这篇文章主要为大家详细介绍了原生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 class="wrapper">
<div id="lunbo">
<div id="list" style="left: -400px;">
<span style="background:yellow;">5</span><span style="background: red;">1</span><span style="background:black;">2</span><span style="background:green;">3</span><span style="background:blue;">4</span><span style="background:yellow;">5</span><span style="background: red;">1</span>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></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].onclick=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.length;i++) {
btn[i].className='';
}
btn[index-1].className='on';
}
prev.onclick=function () { //上一页事件
if (animated) { //如果是动画状态 直接返回解决bug
return;
}
if (index==1) {
index =btn.length;
} else{
index-=1;
}
animate(400);
showBtn();
}
next.onclick=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) || (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.onmouseover=stop;
lunBo.onmouseout=play;
}
以上是所有代码，欢迎指点交流！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 | 
发表于 2017-5-18 08:40:13
