淡入淡出切换图像

Question

我正在这里的一个网站上工作：

http://mccarronandco.com/newsite/modena.php

现在，他们已经决定他们希望在单击缩略图时淡出图片，而不仅仅是切换图像。 当前代码是：

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

谁能建议我可以实现这一目标的方法？ 我不知道从哪里开始，我从一个论坛上获得了上面的代码...

非常感谢，

安迪

Answer 1

我不确定如何做到这一点是纯JavaScript，但是您是否可以使用jQuery库呢？ 它具有fadeIn（）和fadeOut（）方法使这种事情非常容易。 您将创建一个类似

function fadeImage(imageURL)
{
    $("#holder img").fadeOut(300, function(){
        $("#holder img").attr('src', imageURL);
        $("#holder img").fadeIn();
    });
}

然后调用它并通过您要淡入的图像的URL。

Answer 2

您可以实现jQuery来做到这一点。 下载JS文件或使用承载jQuery的CDN并将其添加到您的网站的<head>部分

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后将以下代码添加到您的<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>

并且您的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');" >

这样做是将Img标签的onclick事件绑定到函数SetImg ，然后传递您希望将其设置为图像的URL。 在SetImg函数中，它找到ID = holder的控件并设置SRC属性。 然后调用该元素的fadeIn()函数。

有关API的更多信息，请参见jQuery API文档。

编辑：（要回答评论问题）

仅淡入淡出的代码在新图片中：

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

Answer 3

这个 jQuery插件将允许您通过在用户单击图像之一时简单地调用以下方法来循环显示图像。

$('#fade').cycle();

Answer 4

一种简单的解决方案是将图片持有人的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;
}

而不是img标签，请使用background-image CSS属性。 并编辑此行，

<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'" >

这样，您不必包含任何插件。

淡入淡出切换图像

问题描述

4 个解决方案

解决方案1
0 2013-09-27 12:05:14

解决方案2
0 2013-09-27 12:05:27

解决方案3
0 2013-09-27 12:07:44

解决方案4
0 2013-09-27 12:28:32

淡入淡出切换图像

问题描述

4 个解决方案

解决方案1 0 2013-09-27 12:05:14

解决方案2 0 2013-09-27 12:05:27

解决方案3 0 2013-09-27 12:07:44

解决方案4 0 2013-09-27 12:28:32

解决方案1
0 2013-09-27 12:05:14

解决方案2
0 2013-09-27 12:05:27

解决方案3
0 2013-09-27 12:07:44

解决方案4
0 2013-09-27 12:28:32