ホームページ  >  記事  >  ウェブフロントエンド  >  jquery簡易画像切り替え表示エフェクト実装方法_jquery

jquery簡易画像切り替え表示エフェクト実装方法_jquery

WBOY
WBOYオリジナル
2016-05-16 16:20:111201ブラウズ

この記事の例では、jqueryでの簡単な画像切り替え表示エフェクトの実装方法を説明し、皆さんの参考に共有します。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:

<頭>

jquery 画像切り替え効果

<スクリプトタイプ="text/javascript">
$(関数(){
$("#item li:not(:first)").css("display","none");//最初の画像のみを表示し、他の画像は非表示にします
var bb = $("#item li:last");
var aa = $("#item li:first");
setInterval(function(){
If(bb.is(":visible")){
aa.fadeIn(1000).addClass("in");
bb.hide();
}その他{
$("#item li:visible").addClass("in");
$("#item li.in").next().fadeIn(1000);
$("#item li.in").fadeOut(1000).removeClass("in");
}
},3000);
});











この記事が皆さんの jQuery プログラミングに役立つことを願っています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。