スライド効果と不透明効果を備えたシンプルな jQuery 画像スライダーを作成する方法

スライド効果と不透明効果を備えたシンプルな jQuery 画像スライダーの構築

外部プラグインに依存せずに jQuery でカスタム画像スライダーを作成すると、柔軟性が向上しますそしてコントロール。ここでは、スライドと不透明の両方のトランジション効果を提供する簡略化されたアプローチを示します。

トラバースと操作のための jQuery 関数

コードに入る前に、2 つの主要な jQuery 関数を理解することが不可欠です。 :

• index() が戻ります兄弟要素内の要素の位置。
• eq() は、その位置 (インデックス値) に基づいて要素を選択します。

Opacity効果

不透明効果では、CSSを使用して画像を絶対配置して重ね合わせます。トリガー要素をクリックすると、jQuery の fadeIn() および fadeOut() 関数に依存して、対応する画像がフェードインし、他の画像がフェードアウトします。

スライディング エフェクト

スライディング エフェクトには、二重ラッパーとマスクを使用しますテクニック。画像はマスクされた領域内に配置され、その上でマスクをスライドさせると特定の画像が表示され、スライド遷移のように見えます。

共通 jQuery 応答

不透明効果とスライド効果はどちらも、トリガー (ナビゲーション要素)、次/前のクリック イベント、自動タイミングを処理する共通の jQuery 応答を共有します。トランジション。

HTML 構造

<ul class="images">
    <li>
        <img src="images/1.jpg" alt="1" />
    </li>
    <li>
        <img src="images/2.jpg" alt="2" />
    </li>
    ...
</ul>

<ul class="triggers">
    <li>1</li>
    <li>2</li>
    ...
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

不透明度効果コード

ul.images { position:relative; }
ul.images li { position:absolute; }

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');
}

スライディング効果コード

.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
ul.images { position:relative; top:0px;left:0px; }
/* this width must be total of the images, it comes from jquery */
    ul.images li { float:left; }

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() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

このコードベースは、スライドおよび不透明度の遷移効果を備えた完全に機能する jQuery 画像スライダーを提供します。 CSS やさまざまな jQuery 関数を通じてカスタマイズ可能。

以上がスライド効果と不透明効果を備えたシンプルな jQuery 画像スライダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。