轮播图的实质

轮播图

轮播图的重点在于改变列表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"