JS簡單的輪播的圖片滾動實(shí)例
更新時(shí)間:2013年06月17日 09:13:25 作者:
JS簡單的輪播的圖片滾動實(shí)例,需要的朋友可以參考一下
[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.dbjr.com.cn
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);
};
};
復(fù)制代碼 代碼如下:
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.dbjr.com.cn
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 實(shí)現(xiàn)的簡單無縫滾動輪播圖的示例代碼
- 如何使用JavaScript實(shí)現(xiàn)無縫滾動自動播放輪播圖效果
- JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無縫滾動輪播示例
- javascript實(shí)現(xiàn)異形滾動輪播
- JS實(shí)現(xiàn)排行榜文字向上滾動輪播效果
- js輪播圖無縫滾動效果
- 完美實(shí)現(xiàn)js焦點(diǎn)輪播效果(二)(圖片可滾動)
- JavaScript 輪播圖和自定義滾動條配合鼠標(biāo)滾輪分享代碼貼
- 原生js實(shí)現(xiàn)輪播圖的示例代碼
- JavaScript滾動輪播圖制作原理詳解
相關(guān)文章
JS OOP包機(jī)制,類創(chuàng)建的方法定義
JS OOP包機(jī)制,類創(chuàng)建的方法定義,需要的朋友可以參考下。2009-11-11JavaScript函數(shù)apply()和call()用法與異同分析
這篇文章主要介紹了JavaScript函數(shù)apply()和call()用法與異同,結(jié)合實(shí)例形式分析了apply()和call()的功能、區(qū)別、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08微信小程序項(xiàng)目實(shí)踐之九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)功能
這篇文章主要介紹了微信小程序項(xiàng)目實(shí)踐之九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)功能,需要的朋友可以參考下2018-07-07JavaScript實(shí)現(xiàn)簡單購物小表格
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單購物小表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09JS request函數(shù) 用來獲取url參數(shù)
項(xiàng)目中經(jīng)常會遇到這種問題 下面代碼解決問題!2010-05-05JavaScript實(shí)現(xiàn)按照指定長度為數(shù)字前面補(bǔ)零輸出的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)按照指定長度為數(shù)字前面補(bǔ)零輸出的方法,實(shí)例分析了javascript操作數(shù)字補(bǔ)零的技巧,需要的朋友可以參考下2015-03-03