ホームページ

JS特殊効果

jQueryの効果

jQuery バナー画像の回転切り替え特殊効果

ダウンロード中プレビュー

js代
<スクリプト>
$(関数() {
/*写真位置データ*/
var data = [
{'z-index': 6、不透明度: 1、幅: 760、高さ: 330、上: 40、左: 0}、
{'z-index': 4、不透明度: 0.6、幅: 560、高さ: 243、上: 80、左: -225}、
{'z-index': 3、不透明度: 0.4、幅: 480、高さ: 203、上: -10、左: -170}、
{'z-index': 2、不透明度: 0.2、幅: 620、高さ: 269、上: -60、左: 110}、
{'z-index': 3、不透明度: 0.4、幅: 480、高さ: 203、上部: -10、左: 430}、
{'z-index': 4、不透明度: 0.6、幅: 560、高さ: 243、上: 80、左: 420}、
]
移動();

関数 move() {
/*画像配布*/
for (var i = 0; i var data = データ[i];
$('#slide ul li').eq(i).css('z-index',data['z-index']);
$('#slide ul li').eq(i).stop().animate(data, 1200);
}
}

/*左箭头イベント*/
$('.prev').on('click', function () {
var last = datas.pop();
data.unshift(last);

移動();
})

/*右箭头イベント处理関数*/
関数 nextYewu(){
var first = datas.shift();
data.push(最初);
移動();
}
/*右箭头イベント*/
$('.next').on('click', nextYewu);

/*自動播放*/
var timer = setInterval(function(){
nextYewu();
},5000);
/*ネズミ标进入スライド显示箭头,清除自动播放*/
$('#slide').on({
マウス入力: 関数 () {
$('.arrow').css('display', 'block');
clearInterval(タイマー);
}、mouseleave: function () {
$('.arrow').css('display', 'none');
/*鼠标离开時自動播放*/
clearInterval(タイマー);
タイマー = setInterval(function(){
nextYewu();
},5000)
}
})
})

</スクリプト>

これは、海上教育のネットワークバナー画像切り替え機能、jQuery 画像切り替えコードです。

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn

jquery バナーの希釈バージョン非同期画像テキスト効果切り替え画像特殊効果_jquery

16 May 2016

全画面フェードインとフェードアウトのシンプルなバナー、非同期画像とテキスト効果の切り替え画像特殊効果、必要な友達は以下を参照してください

jquery 画像チルトカスケード切り替え特殊効果コード Sharing_jquery

16 May 2016

この記事では主に jquery 画像のチルトカスケード切り替え効果を紹介します。必要な方はぜひ参考にしてください。