構(gòu)建具有滑動(dòng)和不透明度效果的簡(jiǎn)單 jQuery 圖像滑塊

在 jQuery 中創(chuàng)建自定義圖像滑塊而不依賴外部插件可提供更大的靈活性和控制。這是一種提供滑動(dòng)和不透明過渡效果的簡(jiǎn)化方法。

用于遍歷和操作的 jQuery 函數(shù)

在深入代碼之前，了解兩個(gè)關(guān)鍵的 jQuery 函數(shù)至關(guān)重要:

• index() 返回位置其兄弟元素中的元素。
• eq() 根據(jù)元素的位置（索引值）選擇元素。

不透明度效果

在不透明效果中，圖像使用 CSS 絕對(duì)定位和重疊。單擊觸發(fā)元素時(shí)，相應(yīng)的圖像會(huì)淡入，而其他圖像則淡出，這依賴于 jQuery 的 fadeIn() 和 fadeOut() 函數(shù)。

滑動(dòng)效果

對(duì)于滑動(dòng)效果，我們使用雙層包裝紙和掩模技術(shù)。圖像放置在遮罩區(qū)域內(nèi)，通過在其上滑動(dòng)遮罩來顯示特定圖像，從而產(chǎn)生滑動(dòng)過渡的錯(cuò)覺。

常見 jQuery 響應(yīng)

不透明度和滑動(dòng)效果共享一個(gè)共同的 jQuery 響應(yīng)，用于處理觸發(fā)器（導(dǎo)航元素）、下一個(gè)/上一個(gè)單擊事件和自動(dòng)計(jì)時(shí)

HTML 結(jié)構(gòu)

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

滑動(dòng)影響代碼

.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 響應(yīng)

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 圖像滑塊，具有滑動(dòng)和不透明過渡效果，可通過 CSS 和各種 jQuery 函數(shù)進(jìn)行自定義。

以上是如何構(gòu)建具有滑動(dòng)和不透明度效果的簡(jiǎn)單 jQuery 圖像滑塊？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！