jqueryフェードアウト画像スライドショー点滅切り替え実装method_jquery

この記事の例では、jqueryのフェードとフェード画像スライドショー切り替えの実装方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

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

<頭>



の間に追加します。
<スクリプト言語="javascript" src="js/jquery-1.4.2.min.js">
<スクリプト言語="javascript">
$(関数(){
var _img=$('.slides img');
var _len=_img.length;
var _index=0;
var _moving;
//画像のインデックス番号を挿入
var _ul='

'
for(var i=1; i _ul=_ul '
• ' 私 '
';
}
_ul=_ul '

';
$('div.ico').append(_ul);
var _ico=$('.ico li');
//数字を横切る
_ico.mouseover(function(){
_index=_ico.index(this);
_img.filter(':visible').fadeOut(300,function(){
_img.eq(_index).fadeIn(300);
})
$(this).addClass('high').siblings().removeClass('high');
}).eq(0).mouseover();
//自動グラデーション
_moving=setInterval(autoShow,2000);
_img.hover(function(){clearInterval(_moving)},function(){
_moving=setInterval(autoShow,2000);
})
関数 autoShow(){
_index ;
if(_index==_len) _index=0;
_ico.eq(_index).trigger('mouseover');
};
});



エフェクトをプレビューすると、左下隅にエラーが表示され、エフェクトが表示されません。もちろん、実際の使用ではそのような問題は発生しません。


の間に次のコードを追加します。

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