html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<!-- 因为index.js引用animate.js,所以animate.js必须在其之前引入 -->
<script src="animate.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="main">
<ul class="focus">
<li><a href="#"><img src="upload/focus.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/focus1.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/focus2.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/focus3.jpg" alt=""></a></li>
</ul>
<a href="javascript:;" class="leftarrow"><</a>
<a href="javascript:;" class="rightarrow">></a>
<ol class="circle">
</ol>
</div>
</body>
</html>
css样式
* {
margin: 0;
padding: 0;
}
ul,ol {
list-style: none;
}
img {
vertical-align: middle;
}
.main {
position: relative;
top: 0;
left: 0;
height: 455px;
width: 721px;
overflow: hidden;
}
ul {
position: absolute;
top: 0;
left: 0;
width: 500%;
/* overflow: hidden; */
}
ul li {
float: left;
}
.leftarrow {
display: none;
position: absolute;
top: 210px;
left: 0;
padding: 10px 10px 10px 5px;
color: white;
font-size: 24px;
line-height: 24px;
text-align: center;
border-radius: 0 22px 22px 0;
background:rgba(0, 0, 0, .5);
z-index: 2;
}
.rightarrow {
display: none;
position: absolute;
top: 210px;
left: 688px;
padding: 10px 10px 10px 5px;
color: white;
font-size: 24px;
line-height: 24px;
text-align: center;
border-radius: 22px 0 0 22px;
background:rgba(0, 0, 0, .5);
z-index: 2;
}
.circle {
position: absolute;
top: 430px;
left: 310px;
}
.circle li {
float: left;
width: 10px;
height: 10px;
margin: 0 5px;
border: 2px solid rgba(255, 255, 255, .8);
border-radius: 50%;
}
.current {
background-color: #fff;
}
缓动动画函数JS代码
function animate(obj, target, callback) {
obj.timeout = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timeout);
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15)
}
轮播图JS代码
window.addEventListener('load', function () {
var main = document.querySelector('.main');
var leftArr = document.querySelector('.leftarrow');
var rightArr = document.querySelector('.rightarrow');
var focus = document.querySelector('.focus');
var circle = document.querySelector('.circle');
var focusWidth = focus.children[0].offsetWidth;
focus.addEventListener('mouseenter', function () {
leftArr.style.display = 'block';
rightArr.style.display = 'block';
clearInterval(timer);
});
focus.addEventListener('mouseleave', function () {
leftArr.style.display = 'none';
rightArr.style.display = 'none';
timer = setInterval(function () {
// 手动调用右箭头点击函数
rightArr.click();
// console.log('hh');
}, 2000);
});
// 3.动态创建小圆圈
for (var i = 0; i <= focus.children.length - 1; i++) {
var lis = document.createElement('li');
circle.appendChild(lis);
lis.setAttribute('data-index', i);
lis.addEventListener('click', function (e) {
for (var i = 0; i <= circle.children.length - 1; i++) {
circle.children[i].className = '';
}
this.className = 'current';
console.log(this.getAttribute('data-index'));
var currIndex = this.getAttribute('data-index');
num = currIndex;
cirNum = currIndex;
var target = -focusWidth * currIndex;
animate(focus, target);
})
}
circle.children[0].className = 'current';
var firstli = focus.children[0].cloneNode(true);
focus.appendChild(firstli);
//右按钮移动
var num = 0;
var cirNum = 0;
// 节流阀防止右箭头点击过快
var flag = true;
rightArr.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == focus.children.length - 1) {
focus.style.left = 0;
num = 0;
}
num++;
cirNum++;
if (circle.children.length == cirNum) {
cirNum = 0;
}
circleChange();
var target = -focusWidth * num;
animate(focus, target, function () {
flag = true;
});
}
})
//左按钮移动
leftArr.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == 0) {
num = focus.children.length - 1;
focus.style.left = -focusWidth * num + 'px';
}
num--;
var target = -focusWidth * num;
animate(focus, target, function () {
flag = true;
});
cirNum--;
if (cirNum < 0) {
cirNum = circle.children.length - 1;
}
circleChange();
}
})
// 自动播放
var timer = setInterval(function () {
// 手动调用右箭头点击函数
rightArr.click();
// console.log('hh');
}, 2000);
// 改变小圆圈
function circleChange() {
for (var i = 0; i < circle.children.length; i++) {
circle.children[i].className = '';
}
circle.children[cirNum].className = 'current';
}
})
存在问题:
1.左右箭头会闪动
2.轮播图播放会卡
3.css和html粗糙