<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, ul, ol, li, img {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 520px;
height: 280px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
}
.ad {
width: 520px;
height: 280px;
overflow: hidden;
position: relative;
}
#box img {
width: 520px;
}
.ad ol {
position: absolute;
right: 10px;
bottom: 10px;
}
.ad ol li {
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
text-align: center;
background: #fff;
float: left;
margin-right: 10px;
cursor: pointer;
_display: inline;
}
.ad ol li.current {
background: yellow;
}
.ad ul li {
float: left;
}
.ad ul {
position: absolute;
top: 0;
width: 2940px;
}
.ad ul li.current {
display: block;
}
#focusD {
display: none;
}
#focusD 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;
}
#focusD #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all">
<div class="ad">
<ul >
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
<li><img src="images/04.jpg"/></li>
<li><img src="images/05.jpg"/></li>
</ul>
</div>
<!--相框-->
<div >
<span ><</span>
<span >></span>
</div>
</div>
<script src="common.js"></script>
<script>
//获取相框当注册鼠标进入跟离开事件,进入显示左右焦点,离开则消失
my$("box").onmouseover = function () {
my$("focusD").style.display = "block";
};
my$("box").onmouseout = function () {
my$("focusD").style.display = "";
};
//获取照片的宽度
var width = my$("box").firstElementChild.offsetWidth;
//获取左右焦点注册鼠标点击事件
my$("left").onclick = function () {
//获取ul当前的位置
var left = my$("imgs").offsetLeft;
//ul要移动到的位置
if (left > -2080) {
var index = left + -width;
animate(my$("imgs"), index)
} else {
animate(my$("imgs"), -2080)
}
};
my$("right").onclick = function () {
//获取ul当前的位置
var left = my$("imgs").offsetLeft;
//ul要移动到的位置
if (left < 0) {
var index = left + width;
animate(my$("imgs"), index)
} else {
animate(my$("imgs"), 0)
}
};
//让指定元素移动到指定的位置
//参数一:要移动的元素
//参数二:想要移动到什么位置
function animate(element, target) {
//先清理定时器
clearInterval(element.timeId);
//把定时器id存储到element中的一个属性中
element.timeId = setInterval(function () {
//获取元素当前所在的位置
var current = element.offsetLeft;
//设置每次移动的步数
var step = 10;
//判断想要移动到的位置是大于s还是小于当前位置,大于则移动的是整数,小于则是负数
step = target > current ? step : -step;
//移动之后的位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 5)
}
</script>
</body>
</html>