JS簡(jiǎn)單的輪播的圖片滾動(dòng)實(shí)例
更新時(shí)間:2013年06月17日 09:13:25 作者:
JS簡(jiǎn)單的輪播的圖片滾動(dòng)實(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]);
}); m.fzitv.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);
};
};
復(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]);
}); m.fzitv.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 實(shí)現(xiàn)的簡(jiǎn)單無(wú)縫滾動(dòng)輪播圖的示例代碼
- 如何使用JavaScript實(shí)現(xiàn)無(wú)縫滾動(dòng)自動(dòng)播放輪播圖效果
- JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無(wú)縫滾動(dòng)輪播示例
- javascript實(shí)現(xiàn)異形滾動(dòng)輪播
- JS實(shí)現(xiàn)排行榜文字向上滾動(dòng)輪播效果
- js輪播圖無(wú)縫滾動(dòng)效果
- 完美實(shí)現(xiàn)js焦點(diǎn)輪播效果(二)(圖片可滾動(dòng))
- JavaScript 輪播圖和自定義滾動(dòng)條配合鼠標(biāo)滾輪分享代碼貼
- 原生js實(shí)現(xiàn)輪播圖的示例代碼
- JavaScript滾動(dòng)輪播圖制作原理詳解
相關(guān)文章
js實(shí)現(xiàn)簡(jiǎn)潔的TAB滑動(dòng)門效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)潔的TAB滑動(dòng)門效果代碼,通過簡(jiǎn)單的JavaScript自定義函數(shù)動(dòng)態(tài)遍歷頁(yè)面元素實(shí)現(xiàn)tab滑動(dòng)切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
Bootstrap柵格系統(tǒng)簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Boostrap柵格系統(tǒng)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
JS圖片自動(dòng)輪換效果實(shí)現(xiàn)思路附截圖
這篇文章主要介紹了JS實(shí)現(xiàn)的圖片自動(dòng)輪換效果,有具體的實(shí)現(xiàn)思路及截圖,希望對(duì)大家學(xué)習(xí)有所幫助2014-04-04
JavaScript Drum Kit 指南(純 JS 模擬敲鼓效果)
這篇文章主要介紹了JavaScript Drum Kit 指南,也就是純 JS 模擬敲鼓效果實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-07-07
PHP實(shí)現(xiàn)本地圖片上傳和驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了PHP實(shí)現(xiàn)本地圖片上傳和驗(yàn)證功能的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
Js鼠標(biāo)跟隨代碼小手點(diǎn)擊實(shí)例方法
一個(gè)跟隨鼠標(biāo)的小手效果,鼠標(biāo)移在哪里,小手就跟著移向哪里,會(huì)出現(xiàn)手的效果,放在鏈接上的時(shí)候,手會(huì)變化,兩只手很可愛哦,JS鼠標(biāo)跟隨代碼分享與大家。2013-05-05
html5+canvas實(shí)現(xiàn)支持觸屏的簽名插件教程
jq-signature.js是一個(gè)幫助你創(chuàng)建簽名的jQuery插件,允許你的用戶使用鼠標(biāo),手指或者鉛筆生成簽名。下面這篇文章主要給大家介紹了利用html5+canvas實(shí)現(xiàn)支持觸屏的簽名插件的相關(guān)資料,需要的朋友可以參考下。2017-05-05

