请问·轮播怎么做

请问·轮播怎么做

共 2 个回答
举头望涵涵,低头思第一。 https://www.dffzmxj.com

他给的抽象,我直接给代码。

<style>#loop-pictures img{display:none;}#loop-pictures .display{display:block;}</style>
<div id="loop-pictures">
    <img class="display" src="a.svg" alt="图片0(请修改地址)" />
    <img src="a.svg" alt="图片1(请修改地址)" />
    <img src="a.svg" alt="图片2(请修改地址)" />
</div>
<script>
var i = 0;
var pictures = document.querySelector("#loop-pictures").children.length;
setInterval(function(){
    document.querySelector(`#loop-pictures img:nth-child(${i+1})`).setAttribute("class","");
    if(++i>=pictures) i=0;
    document.querySelector(`#loop-pictures img:nth-child(${i+1})`).setAttribute("class",display");
},1000);
</script>

话说,轮播图怎么就那么吸引你们,不管是GitHub、这里还是群里,总是能看见轮播图的问题。

sad

你问哦我原生的写法的话 我都是子元素(img) 超出后隐藏 显示同一行 然后用js来控制滚动距离,每次滚动一个容器宽度的left,PS:不需要设置容器显示滚动条,依旧可以滚动