如何建立具有淡入淡出或幻燈片效果的簡單 jQuery 映像滑桿？

如何創建具有滑動或不透明度效果的簡單jQuery 圖像滑桿

由於擔心避免使用預開發人員寧願使用預開發建構的插件大小或與現有JavaScript 的潛在衝突。對於喜歡創建自己的滑桿的人，這裡有一個使用jQuery 的簡化方法：

關鍵jQuery 函數：

• index( )：傳回元素在其兄弟元素中的位置元素。
• eq()：依位置選取元素。

方法：

• 擷取所選觸發元素的索引。
• 匹配該索引使用 eq() 方法與對應的影像。

1.淡入/淡出效果

HTML:

<ul class="images">
  ...
</ul>

<ul class="triggers">
  ...
</ul>

HTML:

HTML:

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

jQuery：

2。滑動效果

HTML:

與淡入/淡出相同

.mask { ... }
ul.images { ... }
ul.images li { ... }

CSS:

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 回應滑桿：

以上是如何建立具有淡入淡出或幻燈片效果的簡單 jQuery 映像滑桿？的詳細內容。更多資訊請關注PHP中文網其他相關文章！