###自己封装的轮播图图 框架:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, ul, ol, li, img {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 490px;
height: 270px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
}
.ad {
width: 490px;
height: 270px;
/*overflow: hidden;*/
position: relative;
}
#box img {
width: 490px;
}
.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;
}
#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 id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/5.jpg"/></li>
</ul>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script>
//要做事先找人
var box = document.getElementById("box");
var ad = box.children[0];
var ul = ad.children[0];
var lis = ul.children;
var arr = document.getElementById("arr");
var arrRight = document.getElementById("right");
var arrLeft = document.getElementById("left");
var imgWidth = ad.offsetWidth;
//alert(imgWidth);
//鼠标经过盒子 显示arr
box.onmouseover = function () {
arr.style.display = "block";
}
box.onmouseout = function () {
arr.style.display = "none";
}
var pic = 0;
//点击右侧按钮 移动ul
arrRight.onclick = function () {
//如果pic小于最后一张图片的索引 才可以移动ul
if (pic < lis.length - 1) {
pic++;
//target 和 pic有关 和 图片宽度有关 而且是负数
var target = -pic * imgWidth;
animate(ul, target);
}
}
arrLeft.onclick = function () {
//如果pic大于第一张图片的索引 才可以移动ul
if (pic > 0) {
pic--;
//target 和 pic有关 和 图片宽度有关 而且是负数
var target = -pic * imgWidth;
animate(ul, target);
}
}
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//leader = leader + step
var leader = obj.offsetLeft;
var step = 30;
// //当前位置在目标位置的左侧 所以应该往右走
// if (leader < target) {
// step = step;
// }
// //当前位置在目标位置的右侧 所以应该往左走
// if (leader > target) {
// step = -step;
// }
step = leader < target ? step : -step;
//如果对象的位置在目标的左侧 对盒子的位置进行设置
//如果对象到目标的距离 大于 一步能够迈出的距离
if (Math.abs(target - leader) > Math.abs(step)) {
leader = leader + step;
obj.style.left = leader + "px";
} else {
//快要到达目标的时候 手动把对象放置到目标位置上
obj.style.left = target + "px";
//到达目标就清理定时器
clearInterval(obj.timer);
}
}, 15)
}
</script>
</body>
</html>