<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
#box {
width: 790px;
height: 340px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
#screen {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
#ul li {
float: left;
}
#ol {
position: absolute;
bottom: 10px;
right: 10px;
line-height: 20px;
text-align: center;
}
#ol span {
display: inline-block;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
#ol span.current {
background: #DB192A;
color: #fff;
}
#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">
<div id="screen">
<ul id="ul">
<li>
<img src="img/1.jpg" alt="">
</li>
<li>
<img src="img/2.jpg" alt="">
</li>
<li>
<img src="img/3.jpg" alt="">
</li>
<li>
<img src="img/4.jpg" alt="">
</li>
<li>
<img src="img/5.jpg" alt="">
</li>
</ul>
<div id="ol">
</div>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="Move.js"></script>
<script !src="">
// 获取id函数
function $(id) {
return document.getElementById(id);
}
// 获取非行间样式函数
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, null)[name];
}
}
// 缓动动画函数
function Move(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var stop = true;
for (var arr in json) {
var offsetValue = arr == 'opacity' ? Math.round(parseFloat(getStyle(obj, arr)) * 100) : parseInt(getStyle(obj, arr));
var target = parseInt(json[arr]);
var speed = (target - offsetValue) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (target != offsetValue) {
stop = false;
}
if (arr == 'opacity') {
obj.style.opacity = (offsetValue + speed) / 100;
obj.style.filter = "alpha(opacity=" + offsetValue + speed + ")";
}
offsetValue += speed;
obj.style[arr] = offsetValue + 'px';
}
if (stop) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 20)
}
// 获取需要的元素
var box = $('box');
var screen = $('screen');
var ul = $('ul');
var ol = $('ol');
var arr = $('arr');
var left = $('left');
var right = $('right');
var lis = $('ul').children;
// 获取包裹元素宽度
var imgWidth = screen.offsetWidth;
//
var index = 0;
var timer = null;
for (var i = 0; i < lis.length; i++) {
// 动态创建索引
var spans = document.createElement('span');
ol.appendChild(spans);
spans.innerHTML = i + 1;
spans.setAttribute('data-index', i);
spans.onmouseover = function () {
// 遍历索引，先全部移除class，再对应添加
for (var j = 0; j < ol.children.length; j++) {
ol.children[j].removeAttribute('class');
}
this.setAttribute('class', 'current');
index = this.getAttribute('data-index');
Move(ul, {
'left': -index * imgWidth
})
}
}
ol.children[0].setAttribute('class', 'current');
// 克隆第一个li追加到ul尾部
var firstLi = ul.children[0].cloneNode(true);
ul.appendChild(firstLi);
// 显示隐藏 < >
box.onmouseover = function () {
arr.style.display = 'block';
clearInterval(timer);
}
box.onmouseout = function () {
arr.style.display = 'none';
timer = setInterval(autoPlay, 2000);
}
// 自动循环轮播
timer = setInterval(autoPlay, 2000);
right.onclick = autoPlay;
function autoPlay() {
// 轮播到本应展示的最后一张时（对应li的倒数第二张），让index为0（第一张），且left值为0
if (index == lis.length - 1) {
index = 0;
ul.style.left = 0 + 'px';
}
index++;
Move(ul, {
'left': -index * imgWidth
})
// 根据index，使对应索引变色
if (index == lis.length - 1) {
ol.children[ol.children.length - 1].removeAttribute('class');
ol.children[0].className = 'current';
} else {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].removeAttribute('class');
}
ol.children[index].setAttribute('class', 'current');
}
}
left.onclick = function () {
// 第一张时，index == 本应展示的最后一张（对应li的倒数第二张）
if (index == 0) {
index = lis.length - 1;
ul.style.left = -index * imgWidth + 'px';
}
index--;
Move(ul, {
'left': -index * imgWidth
})
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].removeAttribute('class');
}
ol.children[index].setAttribute('class', 'current');
}
</script>
</body>
</html>
