JS简单的轮播的图片滚动实例_javascript技巧
程序员文章站
2022-03-19 20:43:15
...
[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);
};
};
复制代码 代码如下:
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);
};
};
推荐阅读
-
js实现每日自动换一张图片的方法_javascript技巧
-
js 图片随机不定向浮动的实现代码_javascript技巧
-
上传图片预览JS脚本 Input file图片预览的实现示例_javascript技巧
-
js 禁用浏览器的后退功能的简单方法_javascript技巧
-
js 显示base64编码的二进制流网页图片_javascript技巧
-
php图片加水印原理(超简单的实例代码)_php技巧
-
鼠标移动到图片名上,显示图片的简单实例_javascript技巧
-
js实现的四级左侧网站分类菜单实例_javascript技巧
-
基于JS实现PHP的sprintf函数实例_javascript技巧
-
js实现点击切换checkbox背景图片的简单实例