手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS简单的轮播的图片滚动实例
JS简单的轮播的图片滚动实例
摘要:[javascript]复制代码代码如下:varforimg=function(foritem,hoverStop,defaultfor){...

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

};

};

【JS简单的轮播的图片滚动实例】相关文章:

JS实现模拟风力的雪花飘落效果

javascript函数特点实例

简单的防盗链功能代码(iframe)

JavaScript实现带标题的图片轮播特效

IE中直接运行显示当前网页中的图片 推荐

JS实现简单路由器功能的方法

JavaScript实现的MD5算法完整实例

一端时间轮换的广告

javascript实现简单的进度条

JS+CSS实现的拖动分页效果实例

精品推荐
分类导航