轮播图
轮播图的重点在于改变列表marginTOP距离父亲元素边框的大小
代码如下:
css:
<style>
#content {
width: 500px;
height: 300px;
overflow: hidden;、
}
ul {
list-style: none;
}
img {
width: 500px;
height: 300px;
}
</style>
html:
<div id="content">
<ul id="pic">
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602693623195&di=3d58df8dcda702ced352be3320ec0521&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F1a742135b9c4f8eeb8450ead28b9dc9d987da594.jpg" alt=""></li>
<li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2473366704,3753916588&fm=11&gp=0.jpg" alt=""></li>
<li><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3818920863,167605798&fm=26&gp=0.jpg" alt=""></li>
</ul>
</div>
js:
<script>
var pic = document.getElementById("pic");
var inter = 0;
function auto() {
setInterval(function() {
inter++;
if (inter >= 3) {
inter = 0;
}
change(inter)
}, 300);
}
auto()
function change(obj) {
pic.style.marginTop = -305 * obj + "px";
}
</script>
重点:pic.style.marginTop = -305*obj+"px"