如何使用滑动或不透明效果构建简单的jQuery图像滑块？

Question

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

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

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

Answer 1

在检查示例之前,您应该知道我最常用的两个jQuery函数.

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

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

基本上我选择了触发元素index value并使用eq方法匹配图像上的这个值.

- FadeIn/FadeOut效果.

- 滑动效果.

- 备用鼠标滚轮响应.

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>

OPACITY EFFECT: jsFiddle.

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

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

滑动效果:jsFiddle.

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

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

两个滑块的常见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);
}

Answer 2

这是一个简单易懂的代码,用于在不使用Jquery的情况下使用JavaScript创建图像幻灯片.

<script language="JavaScript"> 
var i = 0; var path = new Array(); 

// LIST OF IMAGES 
path[0] = "image_1.gif"; 
path[1] = "image_2.gif"; 
path[2] = "image_3.gif"; 

function swapImage() { document.slide.src = path[i]; 
if(i < path.length - 1) i++; 
else i = 0; setTimeout("swapImage()",3000); 
} window.onload=swapImage;

</script> 

<img height="200" name="slide" src="image_1.gif" width="400" />