js 与 css 配合最简单、代码量最少的自动轮播。
html代码
<html>
<head>
<style><!-- --></style>
</head>
<body>
<div style="width: 500px; height: 400px">
<ul id="loop">
<li><img src="[图片资源地址]"></li>
<li><img src="[图片资源地址]"></li>
</ul>
</div>
<script><!-- --></script>
</body>
</html>
css代码
<style>
*{
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#loop {
position: relative;
overflow: hidden;
white-space: nowrap;
font-size: 0;
}
#loop > li {
display: inline-block;
transition: all .4s;
}
#loop img {
width: 500px;
height: 400px;
}
</style>
接下来才是重头戏--js代码
<script>
setInterval(leftMove, 4345); /设置循环时间
function leftMove() {
let loop = document.querySelector('#loop');
let li = loop.querySelector('li');
/这是重点,我们得让 ul 的第一个元素往左走 一个图片的宽度
/这里是改变元素的 margin-left，而不是left,因为这取决于我们设置的li 的 css样式
li.style.marginLeft = li.offsetLeft - 500 + 'px';
setTimeout(function(){
li.style = '';
loop.removeChild(li);
loop.appendChild(li);
}, 500);
}
</script>
那我们图片到了最后一张，怎么重复第一张呢--- 不着急我们还有setTimeout
从上面的代码里我们单独讲解setTimeout代码块
元素往左移动完毕，我们就可以改变文档结构了，首先先移除我们已经到了容器外面的li元素，我们用setTimeout异步执行，我们的设置时间是0.5秒，为什么是0.5,而不是更少时间呢？因为在我们 css 样式中
#loop > li {
display: inline-block; //让li成为行内块元素，这样才使得li并排
transition: all .4s; //图片轮播的过渡效果
}
transition是 0.4秒 js中不能比它快，因为会影响过渡效果。 所以尽量设置比过渡效果时间慢
我们让移走的内联元素样式清空，因为这样位置就不会发生改变。然后 使用rem0verrChild方法移除首个元素，使用appendChild方法把移除的元素再添加到 ul 的 子元素 的末尾
