html照片瀑布轮播,JS简单的轮播的图片滚动实例

[javascript]

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]);

});   www.jb51.net

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);

};

};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值