ホームページ >ウェブフロントエンド >CSSチュートリアル >フェード効果またはスライド効果を備えたシンプルな jQuery 画像スライダーを作成する方法
スライド効果または不透明効果を備えたシンプルな jQuery 画像スライダーを作成する方法
多くの開発者は、次のような懸念があるため、事前に構築されたプラグインの使用を避けたいと考えています。サイズや既存の JavaScript との潜在的な競合。独自のスライダーを作成したい人のために、jQuery を使用した簡素化されたアプローチを次に示します。
主要な jQuery 関数:
アプローチ:
1.フェードイン/フェードアウト効果
HTML:
<ul class="images"> ... </ul> <ul class="triggers"> ... </ul>
CS S:
ul.images { position:relative; } ul.images li { position:absolute; }
jQuery:
var target; var triggers = $('ul.triggers li'); var images = $('ul.images li'); var lastElem = triggers.length-1; triggers.first().addClass('active'); images.hide().first().show(); function sliderResponse(target) { images.fadeOut(300).eq(target).fadeIn(300); triggers.removeClass('active').eq(target).addClass('active'); }
2.スライド効果
HTML:
フェードイン/フェードアウトと同じ効果。
CSS:
.mask { ... } ul.images { ... } ul.images li { ... }
jQuery:
var target; var triggers = $('ul.triggers li'); var images = $('ul.images li'); var lastElem = triggers.length-1; var mask = $('.mask ul.images'); var imgWidth = images.width(); triggers.first().addClass('active'); mask.css('width', imgWidth*(lastElem+1) +'px'); function sliderResponse(target) { mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300); triggers.removeClass('active').eq(target).addClass('active'); }
両方の共有 jQuery レスポンススライダー:
triggers.click(function() { ... }); $('.next').click(function() { ... }); $('.prev').click(function() { ... }); function sliderTiming() { ... } function resetTiming() { ... }
以上がフェード効果またはスライド効果を備えたシンプルな jQuery 画像スライダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。