<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 520px;
height: 280px;
border: 1px solid #cccccc;
margin: 200px auto;
padding: 5px;
position: relative;
}
.box .inner {
width: 520px;
height: 280px;
position: relative;
overflow: hidden;
}
.inner ul {
width: 1000%;
position: absolute;
/*有父类，以父级元素为基准*/
top: 0;
}
.inner li {
float: left;
}
.inner img {
width: 520px;
}
#focus {
display: none;
}
#focus span {
width: 40px;
height: 40px;
background: #000000;
color: #ffffff;
font-size: 30px;
font-weight: bold;
border: 1px solid #ffffff;
text-align: center;
line-height: 40px;
opacity: 0.3;
font-family: "黑体";
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
}
#focus #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<ul id="ph">
<li><a href=""><img src="imagesfoucs/01.jpg" alt=""/></a></li>
<li><a href=""><img src="imagesfoucs/02.jpg" alt=""/></a></li>
<li><a href=""><img src="imagesfoucs/03.jpg" alt=""/></a></li>
<li><a href=""><img src="imagesfoucs/04.jpg" alt=""/></a></li>
<li><a href=""><img src="imagesfoucs/05.jpg" alt=""/></a></li>
</ul>
</div>
<div id="focus">
<span id="left"><</span><span id="right">></span>
</div>
</div>
<script src="../common.js"></script>
<script>
//获取box对象
var boxobj=my$("box");
var innerobj=boxobj.children[0];
//获取相框的宽，也就是一张图片的宽
var innerwidth=innerobj.offsetWidth;
//获取ul对象
var ulobj=my$("ph");
//获取图片对象
var imgobj=ulobj.children;
//获取箭头对象
var focusobj=my$("focus");
//注册鼠标事件,鼠标放在box盒子上面，箭头显示出来。
boxobj.onmouseover=function(){
focusobj.style.display="block";
};
boxobj.onmouseout=function(){
focusobj.style.display="none";
};
//为左边箭头焦点注册点击事件
my$("right").onclick=function(){
if(index<ulobj.children.length-1){
index++;
move(ulobj,-index*innerwidth);
}
};
//为右边焦点注册点击事件
var index=0;
my$("left").onclick=function(){
if(index>0){
index--;
move(ulobj,-index*innerwidth);
}
};
function move(element, target) {
//第二个坑，每点一次按钮就出现一个定时器，容易造成越点越快，所以搜先要清理之前的定时器，保证只存在一个定时器。
clearInterval(element.timeid);
//timeid之前是一个变量，现在定义为element的一个属性，这样无论开多少定时器，timeid内存只占一个，不会开辟新的内存空间。
element.timeid = setInterval(function () {
var current = element.offsetLeft;
var step = 10;
step = target - current > 0 ? step : -step;
//每次移动后的距离
current += step;
//第一个坑
//判断移动后的距离是否到达目标位置
if (Math.abs(target - current) > Math.abs(step)) {
//显示移动后的距离，但是要考虑最后马上到的距离。
element.style.left = current + "px";
} else {
//如果距离小于10，就直接到目标点。
clearInterval(element.timeid);
element.style.left = target + "px";
}
}, 20);
}
</script>
</body>
</html>
效果如图所示
左右焦点轮播图
