前言
最近自己练习写网页的时候遇到一个轮播卡带了，先写一个简单轮播，一步一步改造。
源码
<!DOCTYPE html>
<html>
<header>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播测试</title>
<style type="text/css">
* {
list-style: none;
margin: 0;
padding: 0;
}
.banner {
position: relative;
width: 550px;
height: 300px;
margin: 100px auto;
overflow: hidden;
}
.b-items {
position: absolute;
left: 0;
top: 0;
width: 5000px;
animation: all .5s;
}
.b-items li {
float: left;
margin: 0;
}
.b-items li>img {
width: 100%;
height: 300px;
}
.active {}
.active:hover {
/* transform-origin: 0 100% 0;
transform-origin: 0 0;
transform: rotateY(90deg) skew(0, 0deg);
transition: 0.3s; */
}
</style>
</header>
<body>
<div class="banner">
<ul class="b-items" id="bItems">
<li class="active"><a href="#" title="banner"><img src="images/1.jpg" alt="banner1"></a></li>
<li><a href="#" title="banner"><img src="images/2.jpg" alt="banner1"></a></li>
<li><a href="#" title="banner"><img src="images/3.jpg" alt="banner1"></a></li>
<li><a href="#" title="banner"><img src="images/4.jpg" alt="banner1"></a></li>
</ul>
</div>
<script type="text/javascript">
window.onload = function() {
cloneDom();
bannerMove();
};
const cloneDom = function() {
let dom = document.getElementById("bItems");
let firstDom = dom.children[0];
let cloneLI = firstDom.cloneNode(true);
dom.appendChild(cloneLI);
console.log(dom.innerHTML)
};
const bannerMove = function() {
let index = 1;
let dom = document.getElementById("bItems");
let domNum = dom.children.length;
setInterval(function() {
if (index < domNum) {
// 执行轮播操作
console.log(-(550 * index))
dom.style.cssText = 'left: ' + (-(550 * index)) + 'px;';
} else {
// 跳转到第一个
index = 1;
dom.style.cssText = 'left: ' + (-(550)) + 'px;';
}
index++;
}, 2000)
};
</script>
</body>
</html>
