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.glzy8.com

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

  };

  };