JS简单的轮播的图片滚动实例_Javascript教程-查字典教程网
JS简单的轮播的图片滚动实例
JS简单的轮播的图片滚动实例
发布时间:2016-12-30 来源:查字典编辑
摘要:[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);

};

};

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类