笔者最近在创作轮播图,碰到了不少坑,特此分享
1.轮播图需要制作多一张图片作为缓冲,使用cloneNode来实现:
//1.1必须克隆li标签,用来过渡动画
$('ul').appendChild(lis[0].cloneNode(true));
2.在制作匀速动画时,我使用以下代码来封装:
function averageAnimation(id,target,speed) {
// 1.清除定时器
// 当多次用到同一个这个函数时,定时器最好以属性进行赋值
var left=$(id).offsetLeft;
clearInterval($(id).timer);
//2. 判断方向
var dir=target>left?speed:-speed;
$(id).timer=setInterval(function () {
left+=dir;
$(id).style.left=left+'px';
if(Math.abs(target-$(id).offsetLeft)<Math.abs(dir))
{
clearInterval($(id).timer);
$(id).style.left=target+'px';
}
},20);
}
//此处封装简化版的$
function $(id) {
return document.getElementById(id);
}
留意,如果是onmouseover这类函数调用时,必须设置timer为$(id)的一个属性,否则会出现定时器功能叠加。
以下是源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
border: none;
}
#box{
width: 750px;
height: 320px;
padding: 20px;
margin: 50px auto;
border: 1px solid #ccc;
position: relative;
}
img{
vertical-align: top;
}
#top{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#top ul{
width: 4500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#top ul li{
float: left;
}
#bottom{
position: absolute;
bottom: 20px;
right: 20px;
/*清除行内元素的宽度*/
font-size: 0;
}
ol li{
width: 20px;
height: 20px;
background: skyblue;
margin-right: 10px;
border-radius: 50%;
/*inline-block自带行内元素的宽度扩展*/
display: inline-block;
vertical-align: top;
cursor: pointer;
}
.native{
background: orangered;
}
</style>
</head>
<body>
<div id="box">
<div id="top">
<ul id="ul">
<li><img src="imgs/pic01.jpg" alt=""></li>
<li><img src="imgs/pic02.jpg" alt=""></li>
<li><img src="imgs/pic03.jpg" alt=""></li>
<li><img src="imgs/pic04.jpg" alt=""></li>
<li><img src="imgs/pic05.jpg" alt=""></li>
</ul>
</div>
<ol id="bottom">
</ol>
</div>
<script src="js/myFuc.js"></script>
<script>
window.onload=function () {
//1.获得当前li标签
var lis=$('ul').children;
var currentIndex=0,listIndex=0;
//1.1必须克隆li标签,用来过渡动画
$('ul').appendChild(lis[0].cloneNode(true));
//2.对ol进行标签创建
for(var i=0;i<lis.length-1;i++)
{
var li=document.createElement('li');
$('bottom').appendChild(li);
};
//3.第一个选中
$('bottom').children[0].className='native';
//4.监听鼠标进入
var ollis=$('bottom').children;
for(var i=0;i<ollis.length;i++)
{
(function (i) {
var li=ollis[i];
// 4.1当进入li时,会进行样式改变
li.onmouseenter=function () {
for (var i = 0; i < ollis.length; i++) {
ollis[i].className = "";
}
this.className = 'native';
averageAnimation('ul',-750*i,60);
}
})(i)
};
//5.自动轮播
var timer=null;
timer=setInterval(function () {
//5.1图动起来
currentIndex++;
if(currentIndex>lis.length-1)
{
$('ul').style.left=0;
//注意此处为1,因为是从第2张开始的,所以索引是1
currentIndex=1;
}
averageAnimation('ul',-750*currentIndex,60);
//5.2索引动起来
listIndex++;
if(listIndex>ollis.length-1)
{
listIndex=0;
};
for (var i = 0; i < ollis.length; i++) {
ollis[i].className = "";
}
ollis[listIndex].className = 'native';
},1000);
};
</script>
</body>
</html>
以上为未完整版本,后续将继续更新,欢迎指出缺点