一款简单的jQuery轮播图效果,代码简单直接使用

本文分享一款简单的jQuery轮播图效果,代码简单直接照搬使用即可

关键代码js

<script>

    $(function () {
        lbt('focus')
    })

    function lbt(obj) {
        var sWidth = $("#" + obj).find("li").width();

        var len = $("#" + obj).find("li").length;
        var index = 0;
        var picTimer;

        var btn = "<div class='btnBg'></div>";
        btn += "<div class='preNext pre'></div><div class='preNext next'></div>";
        $("#" + obj).append(btn);
        $("#" + obj).find(".btnBg").css("opacity", 0.5);

        $("#" + obj).find(".pre").click(function () {
            index -= 1;
            if (index == -1) { index = len - 1; }
            showPics(index);
        });

        $("#" + obj).find(".next").click(function () {
            index += 1;
            if (index == len) { index = 0; }
            showPics(index);
        });

        $("#" + obj).find("ul").css("width", sWidth * (len));

        $("#" + obj).hover(function () {
            clearInterval(picTimer);
        }, function () {
            picTimer = setInterval(function () {
                showPics(index);
                index++;
                if (index == len) { index = 0; }
            }, 2000);
        }).trigger("mouseleave");

        function showPics(index) {
            var nowLeft = -index * sWidth;
            $("#" + obj).find("ul").stop(true, false).animate({ "left": nowLeft }, 300);
        }
    }; 
    </script>