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

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

我有我的网页上两两件事：大图像，含有3个到4颗小缩略图

当点击缩略图它在src读取和修改的主要图像源的新形象一个div。

我能得到它如何淡入而其他淡出一个（所以它不会去没有什么新的图像褪色之前）

继承人我的代码：

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

只是为了澄清为什么我不想使用现有的插件，是大多数需要你知道图像列表的图像加载之前，缩略图图像是从MySQL数据库通过php retrived，我宁愿不必使2列表一为缩略图和1为主要图像，然后隐藏除了一个主要的div与我想要显示的图像。

我看了一个循环插件，但我会优先考虑不使用它，我知道人们继续关于不重新发明轮子，但如果我继续使用插件做东西，我永远不会去学习jquery如何工作的细节。我曾经使用优秀的IMAGESWITCH，但不适用于jQuery 1.4.3，我需要这个版本的HTML数据（），所以通过解决这个问题，我现在卡住了，为什么我问了一个这样做的方式无需使用插件。

来源

2011-04-14 Dizzy Bryan High

我编辑了我的答案，看看。 – 2011-04-14 14:47:27

jQuery的周期会做到这一点，但它是一个插件。

为了做到这一点，没有插件，你可以加载图像，然后隐藏除第一个以外的所有图像。点击缩略图时，您将淡出所选图像。我会添加一个css类到第一个图像，以使它更容易做到。我也会给每张图片一个id来引用它们。使用CSS将它们放在彼此之上。在您的缩略图图片标签中，您也需要对大图片进行某种引用。

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

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

来源

2011-04-14 14:34:10

感谢您的回复，我想尝试和避免在页面上有多个隐藏的div，实际上我只是想与图像的主div并交换内容，最多2个div，我可以在下面的一个加载newimage ，然后淡出顶部div，将顶部div源代码更改为新图像，并将其淡入以准备用于下一个缩略图点击 – 2011-04-14 14:43:32

改进此代码的几种方法：缓存您想要多次使用的任何jQuery对象;在'setTimeout'回调中链接函数调用;不要使用'setTimeout'，而是使用'.delay（）'。 – 2011-04-14 14:44:13

感谢您的改进，马特！ :) – 2011-04-14 14:49:44

如果我明白这个问题（除了你想避免插件:) jQuery Cycle应该做你想要的。使用fade transition加上pager option。

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

来源

2011-04-14 14:24:12

由于一直没有一个答案约淡入淡出无需插件，这里是我想出了解决方案：

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

来源

2013-08-08 18:28:48

这实际上回答了这个问题。不知道为什么它没有收到投票或被标记为答案。这是我会从这里获得的东西。 – Err 2014-04-30 21:48:12

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

回答

相关问题