封装动画函数
/**匀速动画封装
* @param: ele:元素
* @param: target:目标位置
*/
function animationMove(ele,target){
//1.先清除之前的定时器，以本次为准
clearInterval(ele.timeID);
//2.开始本次移动
ele.timeID = setInterval(function(){
//2.1 获取元素当前位置
var currentLeft = ele.offsetLeft;
//2.2 开始移动
var isLeft = currentLeft <= target?true:false;
isLeft?currentLeft += 15 : currentLeft -= 15;
ele.style.left = currentLeft + 'px';
//2.3 边界检测
if(isLeft?currentLeft >= target:currentLeft <= target){
//(1)停止定时器
clearInterval(ele.timeID);
//(2)元素复位
ele.style.left = target + 'px';
};
},10);
};html 、css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="images/01.jpg" width="500" height="200" /></li>
<li><img src="images/02.jpg" width="500" height="200" /></li>
<li><img src="images/03.jpg" width="500" height="200" /></li>
<li><img src="images/04.jpg" width="500" height="200" /></li>
<li><img src="images/05.jpg" width="500" height="200" /></li>
<li><img src="images/01.jpg" width="500" height="200" /></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</body>js代码
<script src="./animation.js"></script>
<script>
/*自动轮播：
a.页面一加载，启用自动轮播模式： 开启一个5s定时器，执行点击下一页代码
b.鼠标移入box，切换手动模式：清除定时器
c.鼠标移出box：切换自动模式：开启定时器
*/
//1.获取元素
var box = document.getElementById('box');//最外面边框大盒子
var screen = box.children[0];//轮播图显示区域盒子
var arr = box.children[1];//上一页下一页盒子
var ul = screen.children[0];//轮播图列表ul
var ol = screen.children[1];//页码ol
var left = document.getElementById('left');//上一页
var right = document.getElementById('right');//下一页
//第一步：页面加载开启自动模式
var timeID = setInterval(function () {
nextPage();
}, 3000);
//2.注册事件
//2.1 鼠标移入box
box.onmouseover = function () {
//3.事件处理：显示arr
arr.style.display = 'block';
//第二步：移入切换手动模式
clearInterval(timeID);
};
//2.2 鼠标移出box
box.onmouseout = function () {
//3.事件处理：隐藏arr
arr.style.display = 'none';
//第三步：切换自动模式
//注意：timeID已经声明是全局变量，如果这里用了var就变成局部变量外部就会无法访问
timeID = setInterval(function () {
nextPage();
}, 3000);
};
/*无限轮播
a.当从第五张点击下一页的时候，由于此时还有第六张(与第一张一样)，所以会动画滚动到第一张
b.当从第六张点击下一页的时候，由于瞬间修改ul的位置是0，第六张与第一张重复.然后从第一张滚到第二张
*/
//声明一个全局变量记录当前应该显示的图片下标
var index = 0;
//2.3 鼠标点击下一页
right.onclick = function () {
nextPage();
};
function nextPage(){
//3.事件处理
//3.0 如果是最后一张,则直接修改ul的位置为第一张从头开始无限轮播
if (index == ul.children.length - 1) {
ul.style.left = '0px';
index = 0;
};
//3.1 下一页
index++;
//3.2 开始滚动
animationMove(ul, -screen.offsetWidth * index);
//3.3 排他思想修改页码样式
for (var i = 0; i < ol.children.length; i++) {
if (i == index) {
ol.children[i].className = 'current';
} else {
ol.children[i].className = '';
};
};
//3.4 如果是第六张（与第一张重复），则应该显示第一个页码
if (index == ul.children.length - 1) {
ol.children[0].className = 'current';
};
};
//2.4 鼠标点击上一页
left.onclick = function () {
//3.事件处理
//3.0 如果是第一张,(1)修改ul为最后一张位置 （2）index改成最大下标
if (index == 0) {
ul.style.left = -(ul.children.length - 1) * 500 + 'px';
index = ul.children.length - 1;
};
//3.1 上一页
index--;
//3.2 开始滚动
animationMove(ul, -screen.offsetWidth * index);
//3.3 排他思想修改页码样式
for (var i = 0; i < ol.children.length; i++) {
if (i == index) {
ol.children[i].className = 'current';
} else {
ol.children[i].className = '';
};
};
//3.4 如果是第六张（与第一张重复），则应该显示第一个页码
if (index == ul.children.length - 1) {
ol.children[0].className = 'current';
};
};
//2.5 页码点击事件
for (var i = 0; i < ol.children.length; i++) {
//1.给每一个页面添加自定义索引
ol.children[i].setAttribute('yemaIndex', i);
//2.给每一个页面注册点击事件
ol.children[i].onclick = function () {
//3.事件处理
//3.1 获取当前点击页码的索引
var yemaIndex = this.getAttribute('yemaIndex');
//3.2 将当前点击的页码赋值给index
index = yemaIndex;
//3.3 开始滚动
//如果是最后一张，滚动方向就会反过来导致视觉效果比较差
//思路：如果是第六张，先不急着滚动，先回到第一张然后再滚动
if (ul.offsetLeft == -(ul.children.length - 1) * 500) {
ul.style.left = '0px';
};
animationMove(ul, -screen.offsetWidth * yemaIndex);
//3.4 排他思想修改页码样式
for (var j = 0; j < ol.children.length; j++) {
if (j == yemaIndex) {
ol.children[j].className = 'current';
} else {
ol.children[j].className = '';
}
};
};
};
</script>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
