一个蹩脚又简单的轮播的图片滚动-优快云博客

本文介绍了一个简单的图片滚动效果实现方案，使用JavaScript配合jQuery库完成图片的动态展示与切换，包括左右滚动功能及鼠标悬停暂停效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应媳妇要求。写了个图片滚动....比较蹩脚.....

var forimg = function (foritem, hoverStop, defaultfor) {
        var _foritem = foritem.constructor == jQuery ? foritem : $(foritem);
        var imgarr = [
            { "z-index": 1, "width": 100, "height": 100, "left": 0, "top": "75px" },
            { "z-index": 2, "width": 200, "height": 200, "left": 50, "top": "25px" },
            { "z-index": 3, "width": 300, "height": 250, "left": 150, "top": "0" },
            { "z-index": 2, "width": 200, "height": 200, "left": 370, "top": "25px" },
            { "z-index": 1, "width": 100, "height": 100, "left": 520, "top": "75px" }
        ];
        _foritem.each(function (i) {
            var _this = $(this);
            _this.css(imgarr[i] || imgarr[4]);
            _this.find("img").css(imgarr[i] || imgarr[4]);
        });
        var _for = function (_i, data, nulldata, callback) {
            $(foritem).each(function (i) {
                var self = $(this);
                setTimeout(function () {
                    self.css("z-index", (data[i + _i] || nulldata)["z-index"])
                    self.stop().animate(data[i + _i] || nulldata);
                    self.find("img").stop().animate(data[i + _i] || nulldata, function () {
                        callback.call(self, i);
                    });
                });
            });
        };
        var that = this;
        var defaultforfun = function () {
            if (!defaultfor) {
                that.leftfor();
            } else {
                that.rightfor();
            }
        }
        var forimgInterval = setInterval(defaultforfun, 1000);
        if (hoverStop) {
            _foritem.hover(function () {
                clearInterval(forimgInterval);
            }, function () {
                forimgInterval = setInterval(defaultforfun, 1000);
            });
        }
        this.leftfor = function () {
            var nuldata = { "z-index": -1, "width": 100, "height": 100, "left": 520, "top": "75px" };
            imgarr[0]["z-index"] = 1;
            imgarr[0]["z-index"] = 2
            imgarr[0]["z-index"] = 3
            imgarr[0]["z-index"] = 2
            imgarr[0]["z-index"] = 1
            _for(-1, imgarr, nuldata, function (i) {
                if (i == 0) {
                    this.closest("ul").append(this);
                }
            });
        };
        this.rightfor = function () {
            var nuldata = { "z-index": -1, "width": 100, "height": 100, "left": 0, "top": "75px" };
            imgarr[0]["z-index"] = 1;
            imgarr[0]["z-index"] = 2
            imgarr[0]["z-index"] = 4
            imgarr[0]["z-index"] = 5
            imgarr[0]["z-index"] = 2
            _for(1, imgarr, nuldata, function (i) {
                if (i == _foritem.length - 1) {
                    this.closest("ul").prepend(this);
                    this.css("z-index", "1");
                }
            });
        };
        this.stop = function () {
            clearInterval(forimgInterval);
        };
        this.next = function () {
            forimgInterval = setInterval(defaultforfun, 1000);
        };
    };

deom页面请猛戳 fe2base菜园子