如何构建具有滑动和不透明度效果的简单 jQuery 图像滑块？-css教程-PHP中文网

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

Linda Hamilton

发布： 2024-11-24 15:43:32

原创

915 人浏览过

How to Build a Simple jQuery Image Slider with Sliding and Opacity Effects?

构建具有滑动和不透明度效果的简单 jQuery 图像滑块

在 jQuery 中创建自定义图像滑块而不依赖外部插件可提供更大的灵活性和控制。这是一种提供滑动和不透明过渡效果的简化方法。

用于遍历和操作的 jQuery 函数

在深入代码之前，了解两个关键的 jQuery 函数至关重要:

index() 返回位置其兄弟元素中的元素。
eq() 根据元素的位置（索引值）选择元素。

不透明度效果

在不透明效果中，图像使用 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中文网其他相关文章！