通过轮播图例子复习封装动画函数和定时器
Posted front-end0829
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过轮播图例子复习封装动画函数和定时器相关的知识，希望对你有一定的参考价值。
概述：使用js实现自动播放、无缝连接的轮播图
图片轮播的实质是改变图片相对于父对象的左边距的值，利用offsetLeft获取，利用style.left修改
封装动画函数如下：
function animate(element,target)
{
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var current=element.offsetLeft;
var step=10;
step=target>current?step:-step;
current+=step;
if(Math.abs(target-current)<Math.abs(step))
{
current+=step;
element.style.left=current+"px";
}
else
{
element.style.left=target+"px";
clearInterval(element.timeId);
}
},20)
}
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.all
{
width: 580px;
height: 360px;
border: 1px solid red;
margin:auto;
position: relative;
overflow: hidden;
}
.screen
{
width: 580px;
height: 360px;
}
ul
{
list-style: none;
width: 2900px;
height: 360px;
position: absolute;
}
ul img
{
float: left;
width: 580px;
height: 360px;
}
ol
{
list-style: none;
position: absolute;
right: 3px;
bottom: 5px;
}
ol li
{
margin-left: 5px;
width: 20px;
height: 20px;
float: left;
border: 1px solid green;
cursor: pointer;
}
#arr
{
width: 580px;
height: 20px;
position: absolute;
left:3px;
top:180px;
margin-top: -10px;
display: none;
}
#left
{
width: 40px;
height: 20px;
background-color: lightgrey;
position: absolute;
left:0;
line-height: 20px;
text-align: center;
}
#right
{
width: 40px;
height: 20px;
background-color: lightgrey;
position: absolute;
right:0;
line-height: 20px;
text-align: center;
}
.current
{
background-color: red;
}
</style>
</head>
<body>
<div class="all" id="box">
<div class="screen">
<ul>
<li><img src="../image/01.jpg" ></li>
<li><img src="../image/02.jpg" ></li>
<li><img src="../image/taobao.jpg" ></li>
<li><img src="../image/yifan.jpg" ></li>
</ul>
<ol></ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script src="../js/common.js"></script>
<script>
//移动函数
function animate(element,target)
{
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var current=element.offsetLeft;
var step=10;
step=target>current?step:-step;
current+=step;
if(Math.abs(target-current)<Math.abs(step))
{
current+=step;
element.style.left=current+"px";
}
else
{
element.style.left=target+"px";
clearInterval(element.timeId);
}
},20)
}
function clickHandle()
{
console.log(pic);
if(pic==liObj1.length-1)
{
pic=0;
ulObj.style.left=0+"px";
}
pic++;
animate(ulObj,-pic*imgWidth);
console.log("hhhhh"+pic);
if(pic==liObj1.length-1)
{
liObj2[0].setAttribute("class","current");
liObj2[liObj2.length-1].removeAttribute("class");
}
else
{
console.log(pic);
for(var i=0;i<liObj1.length-1;i++)
{
liObj2[i].removeAttribute("class");
}
liObj2[pic].setAttribute("class","current");
}
}
//获取元素
var box=my$("box");
var screen=box.children[0];
var ulObj=screen.children[0];
var olObj=screen.children[1];
var liObj1=ulObj.children;
var liObj2=olObj.children;
var imgWidth=screen.offsetWidth;
var arr=my$("arr");
var left=my$("left");
var right=my$("right");
var pic=0;
//根据图片元素个数在ol中添加添加li
for(var i=0;i<liObj1.length;i++)
{
var li=document.createElement("li");
olObj.appendChild(li);
li.innerHTML=(i+1);
li.setAttribute("index",i);
olObj.children[0].setAttribute("class","current");
//为每个li添加鼠标经过事件
li.onmouseover=function()
{
pic=this.getAttribute("index")
console.log(-pic*imgWidth);
animate(ulObj,-pic*imgWidth);
for(var j=0;j<olObj.children.length;j++)
{
olObj.children[j].removeAttribute("class");
}
this.setAttribute("class","current");
}
}
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId=setInterval(clickHandle,1000);//设置自动播放，加载时设置一个定时器 鼠标经过停止，鼠标退出继续
//为box添加鼠标经过就出现左右焦点事件
box.onmouseover=function()
{
arr.style.display="block";
clearInterval(timeId);
}
box.onmouseout=function()
{
arr.style.display="none";
timeId=setInterval(clickHandle,1000);
}
//为左右焦点绑定点击事件
right.onclick=clickHandle;
left.onclick=function()
{
if(pic==0)//如果是第一个图片要向左则先定位到第五张再向左
{
pic=liObj2.length;
}
pic--;
console.log(pic);
animate(ulObj,-pic*imgWidth);
if(pic==liObj1.length-1)//如果是第最后张图片则将第一个按钮变颜色最后一个按钮无颜色
{
liObj2[0].setAttribute("class","current");
liObj2[liObj2.length-1].removeAttribute("class");
}
else
{
console.log(pic);
for(var i=0;i<liObj1.length-1;i++)
{
liObj2[i].removeAttribute("class");
}
liObj2[pic].setAttribute("class","current");
}
}
</script>
</body>
</html>
以上是关于通过轮播图例子复习封装动画函数和定时器的主要内容，如果未能解决你的问题，请参考以下文章
web前端练习23----js中延时执行函数setInterval()和setTimeout() 案例：倒计时，大小动画平移动画，轮播图