JQBanner轮拨图

首先是自己写的小Banner

每隔多少秒逐渐换一张图

先编写一个框架  给图片div添加一个class为Img2

<div style="width:400px;height:400px;margin:0 auto;margin-top:300px;">
            <div class="img2" style="width:400px;height:400px;display:none;position:absolute;">
                <img src="Img/1122155437.jpg" />
            </div>
            <div class="img2" style="width:400px;height:400px;position:absolute;display:none">
                <img src="Img/1123155469.jpg" />
            </div>

在添加引用

<script src="Scripts/jquery-3.4.1.min.js"></script>

再写一个Js方法

<script>
    //1.刷新页面后此方法运行
    $(function () {
        $(".img2:eq(0)").css("display", "block");
        setInterval(function () {
            //业务逻辑
            //获取到所有的IMG2  判断那个img2的css display为block
            $(".img2").each(
                function () {
                    if ($(this).css("display") == "block") {
                        //返回他的下一个同级级元素
                        //图片逐渐淡出
                        $(this).fadeOut(1000);
                        if ($(this).next().length > 0) {
                            //下一张图片逐渐淡入
                            $(this).next().fadeIn(2000);
                        }
                        else {
                            //第一张图逐渐淡入
                            $(".img2:eq(0)").fadeIn(2000);
                        }
                        return false;
                    }
                }
            )
        }, 3000)
    })
</script>

这个小的Banner  每2秒逐渐隐藏并逐渐显示下一张图片 

还有就是以封装好的Banner插件  插件详情链接地址：https://www.cnblogs.com/yutang-wangweisong/p/11663278.html