html只需要一个ul即可,其余用js和css来写
<ul id="banner"></ul>
css代码:代码中有注解讲述功能
<style>
ul {
height: 200px;
width: 800px;
padding: 0;
position: absolute;
/* 水平居中 */
left: 50%;
margin-left: -400px;
/* 垂直居中 */
top: 50%;
margin-top: -100px;
list-style: none;
}
/* 移入到轮播图区域把鼠标形状变成‘手’ */
ul:hover {
cursor: pointer;
}
li {
position: absolute;
left: 0;
/* 过渡属性,让轮播图切换更自然 */
transition: 0.4s;
}
</style>
js代码:要放在ul下方才能运行,否则没有效果
<script>
//1.获取ul
var cur_ul = document.getElementById('banner')
// 2.创建一个数组实例
var arr = new Array();
// 用js来创建li、img元素,有多少张图片要轮播就循环多少次
for (i = 1; i <= 5; i++) {
// 创建li元素
var cur_li = documen