淡入淡出切换图像
[英]Switching image with a fade in
问题描述
I'm working on a site here: 
我正在这里的一个网站上工作：
http://mccarronandco.com/newsite/modena.php http://mccarronandco.com/newsite/modena.php
They've now decided they want the pictures to fade in when you click a thumbnail rather than just have the image switch. 现在，他们已经决定他们希望在单击缩略图时淡出图片，而不仅仅是切换图像。 The current code is: 当前代码是：
<div id="mainimage">
<img src="images/modena/2.jpg" alt="holder" name="holder" id="holder">
</div>
<div class="gallerycontainer">
<div class="thumbnail">
<img src="images/modena/thumbs/2.jpg" alt="Modena" name="modena" width="75" height="56" title="Modena" onClick="document.holder.src='images/modena/2.jpg'" >
</div>
Can anyone suggest a way I can achieve this please? 谁能建议我可以实现这一目标的方法？ I don't know where to start, I got the above code from a forum... 我不知道从哪里开始，我从一个论坛上获得了上面的代码...
Many thanks, 非常感谢，
Andy 安迪
4 个解决方案
解决方案1
0 2013-09-27 12:05:14
I'm not sure how to do this is pure JavaScript but have you given any through to using the jQuery library? 我不确定如何做到这一点是纯JavaScript，但是您是否可以使用jQuery库呢？ It has fadeIn() and fadeOut() methods to make this sort of thing very easy. 它具有fadeIn（）和fadeOut（）方法使这种事情非常容易。 You would create a function like 您将创建一个类似
function fadeImage(imageURL)
{
$("#holder img").fadeOut(300, function(){
$("#holder img").attr('src', imageURL);
$("#holder img").fadeIn();
});
}
and then call it and pass through the URL of the image you want to fade in. 然后调用它并通过您要淡入的图像的URL。
解决方案2
0 2013-09-27 12:05:27
You can implement jQuery to do this. 您可以实现jQuery来做到这一点。 Download the JS file or use a CDN that hosts jQuery and add it to your websites <head> section 下载JS文件或使用承载jQuery的CDN并将其添加到您的网站的<head>部分
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
And then add the following code to your <head> section : 然后将以下代码添加到您的<head>部分：
<script type="text/javascript">
function SetImg(URL) {
//Fade out the Current Image
$('#holder').fadeOut('slow', function() {
//Set the new Image URL
$('#holder').attr('src', URL);
//Fade In the new image
$('#holder').fadeIn();
});
}
</script>
And your IMG html will become : 并且您的IMG html将变为：
<img src="images/modena/thumbs/2.jpg" alt="Modena" name="modena" width="75" height="56" title="Modena" onClick="SetImg('images/modena/2.jpg');" >
What this does is bind the onclick event of the Img tag to the function SetImg , and you pass the URL of the image you wish to set it to. 这样做是将Img标签的onclick事件绑定到函数SetImg ，然后传递您希望将其设置为图像的URL。 Inside the SetImg function it finds the control with ID = holder and sets the SRC attribute. 在SetImg函数中，它找到ID = holder的控件并设置SRC属性。 And then calls the fadeIn() function of that element. 然后调用该元素的fadeIn()函数。
See jQuery API Documentation for more information on the API. 有关API的更多信息，请参见jQuery API文档 。
Edit : (To answer a comment question) 编辑：（要回答评论问题）
Code to only fadeIn the new image : 仅淡入淡出的代码在新图片中：
<script type="text/javascript">
function SetImg(URL) {
//Hide current image
$('#holder').hide();
//Set the new Image URL
$('#holder').attr('src', URL);
//Fade In the new image
$('#holder').fadeIn();
}
</script>
解决方案3
0 2013-09-27 12:07:44
这个 jQuery插件将允许您通过在用户单击图像之一时简单地调用以下方法来循环显示图像。
$('#fade').cycle();
解决方案4
0 2013-09-27 12:28:32
One simple solution is to set the CSS for the image-holder as , 一种简单的解决方案是将图片持有人的CSS设置为，
#mainimage
{
-webkit-transition: background-image 0.2s ease-in-out;
-moz-transition: background-image 0.2s ease-in-out;
-ms-transition: background-image 0.2s ease-in-out;
-o-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
and instead of an img tag, use background-image CSS property. 而不是img标签，请使用background-image CSS属性。 And edit this line too, 并编辑此行，
<img src="images/modena/thumbs/2.jpg" alt="Modena" name="modena" width="75" height="56" title="Modena" onClick="document.holder.style.backgroundImage = 'images/modena/2.jpg'" >
This way you dont have to include any plugins. 这样，您不必包含任何插件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.