淡入淡出切換圖像

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