如何构建具有淡入淡出或幻灯片效果的简单 jQuery 图像滑块？

如何创建具有滑动或不透明度效果的简单 jQuery 图像滑块

由于担心以下问题，许多开发人员宁愿避免使用预构建的插件大小或与现有 JavaScript 的潜在冲突。对于那些喜欢创建自己的滑块的人，这里有一个使用 jQuery 的简化方法：

关键 jQuery 函数：

• index()：返回元素在其兄弟元素中的位置元素。
• eq()：根据位置选择元素。

方法：

• 检索所选触发元素的索引。
• 匹配该索引使用 eq() 方法与相应的图像。

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中文网其他相关文章！