變化圖像不工作（不能找到什麼導致它）

我想要幻燈片在WordPress，但由於某種原因它不工作：變化圖像不工作（不能找到什麼導致它）

我的.js文件：

(function ($) { 
    function slideSwitch() { 
     var $active = $('#gallery1 IMG.active'); 

     if ($active.length == 0) $active = $('#gallery1 IMG:last'); 

     var $next = $active.next().length ? $active.next() 
       : $('#gallery1 IMG:first'); 

     $active.addClass('last-active'); 

     $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
    } 

    $(function() { 
     setInterval("slideSwitch()", 5000); 
    }); 

});

CSS樣式：

#gallery1{ 
    position: relative; 
    width:400px; 
    height:300px; 
} 
#gallery1 img{ 
    position:absolute; 
    z-index:8; 
} 
#gallery1 img.active{ 
    z-index:10; 
} 
#gallery1 img.last-active{ 
    z-index:9; 
}

的html代碼：

<div id="gallery1"> 
<img src="img1.jpg" class="active"/> 
<img src="img2.jpg"/> 
<img src="img3.jpg"/> 
    </div>

Chromes開發人員工具不顯示任何錯誤。雖然螢火蟲，顯示此錯誤：錯誤斷點：

但我不明白第一個圖像有什麼問題，它加載正常。有沒有人看到這個問題？

來源

2012-08-02 Andrius

您可能想驗證您的第一行是否正在執行您認爲正在執行的操作。我不知道你在哪裏定義了這個腳本塊，但是如果它在頭部或者在你定義的圖像之前，那麼DOM可能不會被加載。嘗試使用$（document）.ready速記版本，它是$（function（）{[這是關於jQuery $（document）.ready shorthand的前一個問題]（http://stackoverflow.com/questions/6004129/document- ready-shorthand） – JustinMichaels 2012-08-02 12:03:19

你可以創建一個示例[jsFiddle]（http://jsfiddle.net）來演示這個問題嗎？ – 2012-08-02 12:08:48

這裏可能有一個範圍問題，你正在擴展JQuery對象的方式，我不是 – Sammaye 2012-08-02 12:08:53

好所提供的答案來解決我的問題（不知道爲什麼那個人刪掉了他的答案）：這一個工作：

var $j = jQuery.noConflict(); 

function slideSwitch() { 
var $active = $j('#gallery1 IMG.active'); 

if ($active.length == 0) $active = $j('#gallery1 IMG:last'); 

var $next = $active.next().length ? $active.next() 
     : $j('#gallery1 IMG:first'); 

$active.addClass('last-active'); 

$next.css({opacity: 0.0}) 
.addClass('active') 
.animate({opacity: 1.0}, 1000, function() { 
    $active.removeClass('active last-active'); 
});

}

$j(function() { 
setInterval("slideSwitch()", 5000); 
});

來源

2012-08-02 12:43:52 Andrius

我無法弄清楚你的代碼可能會出錯，但是，這裏有一個替代方案來創建一個使用jQuery插件的幻燈片。

$("#slides").slides({ 
    preload: true,   
    play: 2000, 
    pause: 2500   
});

看到它在行動here（上面的代碼是對在JavaScript編輯器底部）

來源

2012-08-02 12:06:52

首先 - 你永遠不執行的第一個功能（這就是爲什麼你看到的圖像，並沒有什麼發生）。

嘗試：

$(function() { 

    var slideSwitch = function() { 
    var $active = $('#gallery1 IMG.active'), 
     $next; 

    if ($active.length == 0) { 
     $active = $('#gallery1 IMG:last'); 
    } 

    $next = $active.next().length ? $active.next() : $('#gallery1 IMG:first'); 

    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
     $active.removeClass('active last-active'); 
     }); 
    } 

    setInterval(slideSwitch, 5000); 
});

來源

2012-08-02 12:12:40 nez

也許你沒有看到，但我在wordpress中使用這個函數，並且wordpress不允許在jquery中使用$，所以我必須繞過它我嘗試了你的建議並得到這個錯誤： Uncaught TypeError：對象[object window]的屬性'$'是不是功能。我改變功能之前，我得到了這個錯誤，因爲它是現在。 – Andrius 2012-08-02 12:24:38

@oerp首先在Google上提供了正確的代碼：http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/ – Sammaye 2012-08-02 12:28:51

嗯，我試過這個：http：// digwp .com/2011/09/using-instead-of-jquery-in-wordpress/ 能夠使用$。忘了在最後添加（jQuery），但它不能解決它。 – Andrius 2012-08-02 12:32:26

@nez是正確的，當DOM準備好，因爲你是如何聲明的匿名函數的功能不會被執行。它應該是這樣的：

(function ($) { 
    function slideSwitch() { 
     var $active = $('#gallery1 IMG.active'); 

     if ($active.length == 0) $active = $('#gallery1 IMG:last'); 

     var $next = $active.next().length ? $active.next() 
       : $('#gallery1 IMG:first'); 

     $active.addClass('last-active'); 

     $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
    } 

    $(function() { 
     setInterval("slideSwitch()", 5000); 
    }); 
}(jQuery));

該聲明是有幫助的，以確保你的插件不與可能使用美元符號其他庫發生衝突，這將jQuery傳遞給IIFE最佳實踐（立即調用函數表達式）將其映射到美元符號，以便在其執行範圍內不會被另一個庫覆蓋。直接從他們的documenation：

http://docs.jquery.com/Plugins/Authoring

來源

2012-08-02 12:24:58 JustinMichaels

我試過這個，但由於某種原因它不起作用 – Andrius 2012-08-02 12:46:50

當你引用美元符號時，你仍然收到錯誤嗎？ – JustinMichaels 2012-08-02 12:49:14

不，當我使用這個，我沒有得到任何錯誤，但圖像不會改變。我寫的答案（該人刪除了）正在工作。 – Andrius 2012-08-02 12:51:35

你做錯了。

你需要一個沒有衝突的版本的jQuery將由如圖所示在這個環節走樣沿側原型運行：http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

然後讓你的代碼：

var $j = jQuery.noConflict(); 

function slideSwitch() { 
    var $active = $j('#gallery1 IMG.active'); 

    if ($active.length == 0) $active = $j('#gallery1 IMG:last'); 

    var $next = $active.next().length ? $active.next() 
      : $j('#gallery1 IMG:first'); 

    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) 
    .addClass('active') 
    .animate({opacity: 1.0}, 1000, function() { 
     $active.removeClass('active last-active'); 
    }); 
} 

$j(function() { 
    setInterval("slideSwitch()", 5000); 
});

來源

2012-08-02 12:31:44 Sammaye

變化圖像不工作（不能找到什麼導致它）

回答

相關問題