<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<script src="js/animate.js">
</script>
<script src="js/index.js">
</script>
</head>
<body>
<div class="focus">
<a href="javascript:;" class="arrow-l"><</a>
<a href="javascript:;" class="arrow-r">></a>
<ul>
<li>
<a href="#"><img src="QQ图片4.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="QQ图片5.jpg" alt=""> </a>
</li>
<li>
<a href="#"><img src="QQ图片6.jpg" alt=""> </a>
</li>
</ul>
<ol class="circle">
</ol>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
display: inline-block;
}
a{
text-decoration: none;
}
.focus{
position: relative;
top: 0;
left: 0;
width: 720px;
height: 455px;
margin: 200px auto;
overflow: hidden;
}
.focus ul{
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li
{
float: left;
list-style: none;
}
.arrow-l,
.arrow-r{
display: none;
position: absolute;
top: 50%;
margin-top: -20%;
width: 24px;
height: 40px;
background-color: rgba(0,0,0,0.3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
.arrow-r{
right: 0;
}
.circle{
position: absolute;
bottom: 10px;
left: 50px;
width: 80px;
height: 10px;
margin-left: -25px;
}
.circle li{
float: left;
width: 8px;
height: 8px;
border: 2px solid rgba(255,255,255,0.5);
margin: 0 3px;
border-radius: 50%;
cursor: pointer;
list-style: none;
}
.current{
background-color: #fff;
}
window.addEventListener('load', function () {
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
focus.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null;
})
focus.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function () {
arrow_r.click();
},2000);
})
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
var num = 0;
var circle = 0;
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
li.setAttribute('index', i);
ol.appendChild(li);
li.addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
num = index;
circle = index;
animate(ul, -index * focusWidth);
})
}
ol.children[0].className = 'current';
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
var flag = true;
arrow_r.addEventListener('click', function () {
if (flag){
flag = false;
if (num === ul.children.length - 1) {
ul.style.left = '0';
num = 0;
}
num++;
animate(ul, -num * focusWidth,function() {
flag = true;
});
circle++;
circle === ol.children.length ? circle = 0 : circle;
circleChange();
}
});
arrow_l.addEventListener('click', function () {
if (flag){
flag = false;
if (num === 0) {
num = ul.children.length - 1;
ul.style.left = 'num * focusWidth';
}
num--;
animate(ul, -num * focusWidth,function () {
flag = true;
});
circle--;
circle = circle < 0 ? circle = ol.children.length - 1 : circle;
circleChange();
}
});
function circleChange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
var timer = setInterval(function () {
arrow_r.click();
},2000);
})