手机
当前位置:查字典教程网 >编程开发 >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实现简洁、全兼容的拖动层实例

js实现简单锁屏功能实例

javascript实现简单的进度条

javascript实现淡蓝色的鼠标拖动选择框实例

JS与Java在网页设计中的区别

JavaScript AOP编程实例

JavaScript实现广告的关闭与显示效果实例

JQuery中两个ul标签的li互相移动实现方法

收集整理的四个方向的滚动

如何控制框架页的滚动

精品推荐
分类导航