用jQuery实现简单的轮播

开发工具与关键技术：Visual Studio 2015 JavaScript
作者：黄冠棋
撰写时间：2019年1月16日
如何用jQuery实现一个简单的轮播呢？首先在一个div里设置一个超出隐藏的样式，然后给子div加一个定位 跟据top或left值进行移动子div,再用setInterval定时器每隔固定的事件执行一次移动方法，从而实现轮播效果
HTML

   <div id="yi" style="width:120px;height:120px; margin:200px 0 0 850px;background:#808080;  overflow:hidden;">
            <div id="er" style="width:120px;height:16800px;position:relative;top:0;">
                    <div style="width:120px;height:120px;">
                    <img src="~/Content/image/风暴之怒@迦娜.png" />
                    </div>
                    <div style="width:120px;height:120px;">
                        <img src="~/Content/image/弗利尔卓德之心@布隆.png" />
                    </div>
                    <div style="width:120px;height:120px;">
                        <img src="~/Content/image/牛头酋长@阿利斯塔.png" />
                    </div>
                    <div style="width:120px;height:120px;">
                        <img src="~/Content/image/魂锁典狱长@锤石.png" />
                    </div>
                    <div style="width:120px;height:120px;">
                        <img src="~/Content/image/唤潮鲛姬@娜美.png" />
                    </div>
            </div>
        </div>

JavaScript

$(function () {
            setInterval(function () {
                var top = parseInt($("#er").css("top"));
                if (top < -360) {
                    $("#er").css("top", 0+"px");
                } else {
                    $("#er").css("top", top - 120 + "px");
                }
            }, 500);
        });