如何构建具有滑动或不透明效果的简单 jQuery 图像滑块? [英] How to build simple jQuery image slider with sliding or opacity effect?

问题描述

我们中的一些人可能不想使用现成的插件，因为它们的尺寸很大并且可能与当前的 javascript 产生冲突.

我之前使用的是轻型滑块插件，但是当客户进行模块化修改时，它变得非常难以操作.然后我的目标是构建我的以便轻松定制它.我相信滑块不应该从一开始就构建那么复杂.

什么是构建 jQuery 图像滑块的简单而干净的方法?

解决方案

在查看示例之前，您应该了解我最常用的两个 jQuery 函数.

index() 返回值是一个整数，表示 jQuery 中第一个元素的位置对象相对于其兄弟元素.

eq() 根据元素的位置(索引值)选择元素.>

基本上，我采用所选触发元素的 index value 并使用 eq 方法在图像上匹配此值.

- 淡入/淡出效果.

- 滑动效果.

- 备用鼠标滚轮响应.

<小时>

html 示例:

<li><img src="images/1.jpg" alt="1"/><li><img src="images/2.jpg" alt="2"/>...
<ul class="触发器"><li>1</li><li>2</li>...<span class="control prev">Prev</span><span class="control next">Next</span>

<小时>

不透明效果:jsFiddle.

css 技巧: 用位置重叠图像:绝对

ul.images { position:relative;}ul.images li { 位置:绝对；}

jQuery:

var 目标；var triggers = $('ul.triggers li');var images = $('ul.images li');var lastElem = triggers.length-1;triggers.first().addClass('active');图像.hide().first().show();功能滑块响应(目标){images.fadeOut(300).eq(target).fadeIn(300);triggers.removeClass('active').eq(target).addClass('active');}

<小时>

滑动效果:jsFiddle.

css 技巧: 使用双重包装器并使用 child 作为掩码

.mask { float:left;边距:40px；宽度:270px；高度:266px；溢出:隐藏；}ul.images { 位置:相对；顶部:0px；左侧:0px；}/* 这个宽度必须是图像的总和，它来自 jquery */ul.images li { 浮动:左；}

jQuery:

var 目标；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');功能滑块响应(目标){mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);triggers.removeClass('active').eq(target).addClass('active');}

<小时>

两个滑块的常见 jQuery 响应:

( 触发器 + 下一次/上一次点击和计时 )

triggers.click(function() {如果 ( !$(this).hasClass('active') ) {目标 = $(this).index();滑块响应(目标)；重置时间()；}});$('.next').click(function() {target = $('ul.triggers li.active').index();目标 === lastElem ?目标 = 0 : 目标 = 目标 + 1;滑块响应(目标)；重置时间()；});$('.prev').click(function() {target = $('ul.triggers li.active').index();lastElem = triggers.length-1;目标 === 0 ?目标 = lastElem :目标 = 目标-1；滑块响应(目标)；重置时间()；});功能滑块计时(){target = $('ul.triggers li.active').index();目标 === lastElem ?目标 = 0 : 目标 = 目标 + 1;滑块响应(目标)；}vartimingRun = setInterval(function() { sliderTiming(); },5000);函数resetTiming() {clearInterval(timingRun);TimingRun = setInterval(function() { sliderTiming(); },5000);}

<小时>

Some of us might not want to use ready plugins because of their high sizes and possibilty of creating conflicts with current javascript.

I was using light slider plugins before but when customer gives modular revise, it became really hard to manipulate. Then I aim to build mine for customising it easily. I believe sliders shouldn't be that complex to build from beginning.

What is a simple and clean way to build jQuery image slider?

解决方案

Before inspecting examples, you should know two jQuery functions which i used most.

index() returns value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

eq() selects of an element based on its position (index value).

Basicly i take selected trigger element's index value and match this value on images with eq method.

- FadeIn / FadeOut effect.

- Sliding effect.

- alternate Mousewheel response.

---

​html sample:

<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>

---

OPACITY EFFECT: jsFiddle.

css trick: overlapping images with position:absolute

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

---

SLIDING EFFECT: jsFiddle.

css trick: with double wrapper and use child as mask

.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; }

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

---

Common jQuery response for both slider:

( triggers + next/prev click and timing )

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 图像滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！