Question

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

我的页面上有两件事：一个大图像，一个包含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数据（），所以通过以前的解决，我现在卡住了，为什么我问这样做的方法不使用插件。

Answer 1

如果我理解了这个问题（除了你想避免插件的意愿:) jQuery Cycle应该完全按你的意愿去做。将fade transition与pager option结合使用。

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

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

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

Answer 3

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

<!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小提琴示例http://jsfiddle.net/DYYCy/

没有插件的Jquery交叉淡入淡出

3 个答案: