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

编辑:(回答评论问题）

代码只能淡化新图像：

<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

This 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 个答案: