没有插件的jQuery交叉淡入淡出答案

【问题标题】：Jquery crossfade without a plugin没有插件的jQuery交叉淡入淡出
【发布时间】：2011-08-05 14:20:41
【问题描述】：

这里有很多东西指向插件来做交叉淡入淡出和东西，但没有一个真正适合我的需要。

我的页面上有两件事：一张大图，一个包含 3 或 4 个小缩略图的 div

当点击缩略图时，它会读取 src 并将主图像源更改为新图像。

我如何让它淡入而另一个淡出（所以在淡入新图像之前它不会消失）

这是我的代码：

$('.TnImage').live('click', function() {
        var newImage = $(this).attr('src');
        var oldImage = $('.mainImage').attr('src')
        $('.mainImage').fadeOut('slow');
        $('.mainImage').attr('src', newImage).fadeIn('slow');
    });

只是为了澄清为什么我不想使用现有的插件，是大多数要求你事先知道要加载的图像列表，缩略图是通过 php 从 mysql 数据库中检索的，我' d 而不是必须为缩略图制作 2 个列表，为主要图像制作 1 个列表，然后隐藏除一个主 div 之外的所有内容，其中包含我想要显示的图像。

我看过一个循环插件，但我不想使用它，我知道人们一直在坚持不要重新发明轮子，但如果我继续使用插件来做事，我永远不会去学习jquery 如何工作的具体细节。我曾经使用出色的 IMAGESWITCH，但不适用于 jquery 1.4.3，我需要这个版本的 html 数据（），所以以前依靠这个，我现在被卡住了，所以为什么我要问这样做的方法不使用插件。

【问题讨论】：

我已经编辑了我的答案，看看吧。

标签： jquery image fade

【解决方案1】：

由于没有关于没有插件的交叉淡入淡出的答案，这是我想出的解决方案：

<!DOCTYPE html>
<html>
<head>

<script type="application/javascript" src="jquery-1.9.1.js"></script>
<script type="application/javascript" src="jquery-ui-1.10.2.custom.min.js"></script>

<link type="text/css" rel="stylesheet" href="jquery-ui-1.10.2.custom.min.css" />

<title></title>

<script>
var list = new Array();
var increment = 0;

$(function(){
$.when(
    $("#image_preload img").each(function(i, e){
        image = $(this).attr('src');
        list.push(image);
    })
).then(function(){
    rotate()
});
});

function rotate(){
$("#deactive").fadeOut(1000, function(){
});

$("#active").attr('src', list[increment]);

setTimeout(function(){
    increment++;

    if(increment == list.length){
        increment = 0;
    }

    $("#deactive").attr('src', list[increment]);

    $("#deactive").fadeIn(1000, function(){
        rotate();
    });
}, 5000);
}
</script>

<style>
html, body {
margin: 0px;
padding: 0px;
}

#display {
margin: 0px auto;
position: relative;
text-align: center;
width: 220;
}

#display img {
left: 0px;
margin: 0px auto;
position: absolute;
top: 0px;
}

#image_preload {
display: none;
}
</style>

</head>
<body>

<div id="display">
<img src="" width="200" height="200" alt="" id="active" />
<img src="" width="200" height="200" alt="" id="deactive" />
</div>

<div id="image_preload">
<img src="1.png" width="200" height="200" alt="" />
<img src="2.jpg" width="200" height="200" alt="" />
<img src="3.png" width="200" height="200" alt="" />
<img src="4.jpg" width="200" height="200" alt="" />
<img src="5.jpg" width="200" height="200" alt="" />
</div>

</body>
</html>

可能不是世界上最好的，但它很简单而且很有效。

这里是 JS Fiddle 示例 http://jsfiddle.net/DYYCy/

【讨论】：

这实际上回答了这个问题。不知道为什么它没有收到投票或被标记为答案。这是我要从这里开始的东西。

【解决方案2】：

jQuery 循环会这样做，但它是一个插件。

为了在没有插件的情况下执行此操作，您可以加载图像，然后隐藏除第一个之外的所有图像。单击缩略图时，您会淡出所选图像。我会在第一个图像中添加一个 css 类以使其更容易执行。我还会为每个图像提供一个 id 以引用它们。使用 CSS 将它们放在一起。在您的缩略图标签中，您还需要某种对大图的引用。

$('.TnImage').live('click', function() {
    $('.selected').fadeOut(500, function(){
        $(this).removeClass('selected');
    });
    $('#'+$(this).attr('imgidref')).delay(250).fadeIn('slow').addClass('selected');
});

我知道这是一个粗略的例子，但它应该涵盖基本原理。

【讨论】：

感谢您的回复，我想尽量避免页面上有多个隐藏的 div，实际上我只想要带有图像的主 div 并将内容交换出去，我可以最多 2 个 div在下面加载新图像，然后淡出顶部 div，将顶部 div 源更改为新图像并将其淡入准备好下一次缩略图点击
一些改进此代码的方法：缓存您想要多次使用的任何 jQuery 对象；在setTimeout 回调中链接函数调用；根本不要使用setTimeout，而是使用.delay()。
感谢您的改进，马特！ :)

【解决方案3】：

如果我理解这个问题（除了您希望避免使用插件 :) jQuery Cycle 应该完全按照您的意愿行事。将fade transition 与pager option 结合使用。

http://jsfiddle.net/mattball/xM3cC/

【讨论】：