ホームページ > ウェブフロントエンド > jsチュートリアル > JS シンプルなカルーセル画像のスクロール例_JavaScript スキル

JS シンプルなカルーセル画像のスクロール例_JavaScript スキル

WBOY
リリース: 2016-05-16 17:32:19
オリジナル
971 人が閲覧しました

[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, "高さ": 250, "左": 150, "上": "0" },
{ "z-index": 2, "幅": 200, "高さ": 200, "左": 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; 
vardefaultforfun = 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, "トップ": "75ピクセル" }; 
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": " 75ピクセル" }; 
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) {
これ。 close("ul").prepend(this);
this.css("z-index", "1");
}); 
}; 
this.stop = function () {
clearInterval(forimgInterval); 
}; 
this.next = function () {
forimgInterval = setInterval(defaultforfun, 1000); 
}; 
}; 

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート