轮播插件

关注

原创最新推荐文章于 2026-09-11 15:14:39 发布 821 阅读 AI 写同款· GEO 优化 ›

打造带标题的jQuery图片轮播插件 jQuery是一个开源的JavaScript库，它的设计初衷是简化HTML文档遍历、事件处理、动画和Ajax交互，从而使得开发者能够更快速地编写网页。由John Resig在2006年发布，并迅速获得了广泛的流行和认可。随着Web技术的发展和用户需求的增长，jQuery不断更新迭代，至今已经发布了多个版本，其中jQuery 1.x版本是针对旧版浏览器的维护版，而jQuery 2.x则是更轻量级的版本，专注于现代浏览器。阅读详情

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        #container {
            margin: 20px auto;
            width: 1200px;
            height: 800px;
        }

        .banner {
            position: relative;
            width: 1200px;
            height: 220px;
        }

        li {
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
        }

        .none {
            display: none;
        }
    </style>
</head>

<body>
    <div id="container">

        <ul class="banner">
            <li><img src="pic1.png" alt=""></li>
            <li><img src="pic2.png" alt=""></li>
        </ul>
        <input type="hidden" value="0" id="liIndex">
    </div>
    <script src="jquery-1.11.3.js"></script>
    <script>
        $.extend({
            seI_autoFn: null,
            loopLen: $(".banner li").length,
            autoFn: function () {
                var index = $("#liIndex").val();
                if (index < $.loopLen - 1) {
                    index++;
                } else {
                    index = 0;
                }
                $($(".banner li")).addClass("none");
                $($(".banner li")).eq(index).fadeIn("slow", function () {
                    $(this).removeAttr("style").removeClass("none")
                });
                $("#liIndex").val(Number(index));

                clearTimeout($.seI_autoFn);
                $.seI_autoFn = setTimeout(function () {
                    $.autoFn()
                }, 3000);
            },

        })
        $.autoFn();
    </script>
</body>

</html>

收录于