今天给大家分享一个用原生JS实现的呼吸轮播图，效果如下：
以下是代码实现，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>原生JS实现呼吸轮播图</title>
<style>
ul {
margin: 0;
padding-left: 0;
}
li {
list-style: none;
}
img {
border: none;
}
#main {
width: 280px;
height: 330px;
overflow: hidden;
position: relative;
margin: 20px auto 0 auto;
}
#main ul {
position: absolute;
left: 0;
}
#main ul li {
width: 280px;
height: 330px;
float: left;
position: absolute;
filter: alpha(opacity=0);
opacity: 0;
}
#btn {
line-height: 14px;
text-align: center;
background: #eeeeee;
width: 280px;
margin: 10px auto 0 auto;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
#btn a {
display: inline-block;
width: 14px;
height: 14px;
text-decoration: none;
line-height: 12px;
text-align: center;
border-radius: 7px;
}
#btn a.index {
background-color: #ccc;
}
#btn a.active {
background-color: red;
}
</style>
<script type="text/javascript" src="js/move.js"></script>
<script>
window.onload = function () {
var oMain = document.getElementById('main');
var oUl = oMain.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var oBtn = document.getElementById('btn');
var aA = oBtn.getElementsByTagName('a');
var iNow = 1;
var iNow2 = 1;
var bBtn = true;
var num = 3;
var timer = null;
oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';
aA[0].onclick = function () {
if (bBtn) {
clearInterval(timer);
timer = setInterval(autoPlay, 3000);
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'relative';
aLi[i].style.filter = 'alpha(opacity=100)';
aLi[i].style.opacity = 1;
}
oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
if (iNow == 1) {
iNow = aLi.length;
aLi[aLi.length - 1].style.position = 'relative';
aLi[aLi.length - 1].style.left = -aLi.length * aLi[0].offsetWidth + 'px';
} else {
iNow--;
}
iNow2--;
toRun();
bBtn = false;
}
};
aA[aA.length - 1].onclick = function () {
if (bBtn) {
clearInterval(timer);
timer = setInterval(autoPlay, 3000);
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'relative';
aLi[i].style.filter = 'alpha(opacity=100)';
aLi[i].style.opacity = 1;
}
oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
if (iNow == aLi.length) {
iNow = 1;
aLi[0].style.position = 'relative';
aLi[0].style.left = aLi.length * aLi[0].offsetWidth + 'px';
} else {
iNow++;
}
iNow2++;
toRun();
bBtn = false;
}
};
for (var i = 1; i < aA.length - 1; i++) {
aA[i].index = i;
aA[i].onclick = function () {
clearInterval(timer);
timer = setInterval(autoPlay, 3000);
iNow = this.index;
iNow2 = this.index;
toShow();
};
};
function toRun() {
for (var i = 1; i < aA.length - 1; i++) {
aA[i].className = 'index';
}
aA[iNow].className = 'active';
startMove(oUl, { left: -(iNow2 - 1) * aLi[0].offsetWidth }, function () {
if (iNow == 1) {
aLi[0].style.position = 'relative';
aLi[0].style.left = 0;
oUl.style.left = 0;
iNow2 = 1;
} else if (iNow == aLi.length) {
aLi[aLi.length - 1].style.position = 'relative';
aLi[aLi.length - 1].style.left = 0;
oUl.style.left = -(aLi.length - 1) * aLi[0].offsetWidth + 'px';
iNow2 = aLi.length;
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'absolute';
aLi[i].style.filter = 'alpha(opacity=0)';
aLi[i].style.opacity = 0;
}
oUl.style.left = 0;
aLi[iNow2 - 1].style.zIndex = num++;
aLi[iNow2 - 1].style.filter = 'alpha(opacity=100)';
aLi[iNow2 - 1].style.opacity = 1;
bBtn = true;
});
};
function toShow() {
for (var i = 1; i < aA.length - 1; i++) {
aA[i].className = 'index';
}
for (var i = 0; i < aLi.length; i++) {
startMove(aLi[i], { opacity: 0 });
}
aA[iNow].className = 'active';
startMove(aLi[iNow - 1], { opacity: 100 }, function () {
aLi[iNow - 1].style.zIndex = num++;
});
}
timer = setInterval(autoPlay, 3000);
function autoPlay() {
if (iNow == aLi.length) {
iNow = 1;
iNow2 = 1;
} else {
iNow++;
iNow2++;
}
toShow();
}
};
</script>
</head>
<body>
<div id="main">
<ul>
<li style="z-index:2; filter:alpha(opacity=100); opacity:1;">
<a>
<img src="images/0.jpg" />
</a>
</li>
<li>
<a>
<img src="images/1.jpg" />
</a>
</li>
<li>
<a>
<img src="images/2.jpg" />
</a>
</li>
<li>
<a>
<img src="images/3.jpg" />
</a>
</li>
</ul>
</div>
<div id="btn">
<a class="prev" href="javascript:;">
<</a> <a class="active" href="javascript:;">
</a>
<a class="index" href="javascript:;"></a>
<a class="index" href="javascript:;"></a>
<a class="index" href="javascript:;"></a>
<a class="next" href="javascript:;">></a>
</div>
</body>
</html>
以下是上面代码中引入的最重要的运动函数 move.js的代码：
function startMove(obj, json, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
doMove(obj, json, fnEnd);
}, 30);
}
function doMove(obj, json, fnEnd) {
var iCur = 0;
var attr = null;
var bStop = true;
for (attr in json) {
if (attr == 'opacity') {
if (parseInt(100 * getStyle(obj, attr)) == 0) {
iCur = parseInt(100 * getStyle(obj, attr));
} else {
iCur = parseInt(100 * getStyle(obj, attr)) || 100;
}
} else {
iCur = parseInt(getStyle(obj, attr)) || 0;
}
var iSpeed = (json[attr] - iCur) / 5;
iSpeed = (iSpeed > 0) ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (json[attr] != iCur) {
bStop = false;
}
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
if (bStop) {
clearInterval(obj.timer);
if (fnEnd) {
fnEnd.call(obj);
}
}
}
function stopMove(obj) {
clearInterval(obj.timer);
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj)[attr];
}
}
