在一個頁面上有兩個Javascript，另一個停止工作

我目前在我的頁面上運行了兩個不同的JavaScript。一個用於幻燈片放映，另一個用於定時圖像交換。我只能讓其中一個或另一個工作，具體取決於代碼中的哪一個腳本較低。我讀了很多教程，它似乎增加了<body onload="func1();func2()">將解決問題，但它沒有。在一個頁面上有兩個Javascript，另一個停止工作

我已經當圖像交換的作品，但幻燈片顯示不出來

http://pancakeparadise.com/shirtswap.html

當幻燈片顯示了和作品，但圖像不換出

兩個示例頁面

http://pancakeparadise.com/shirtswap1.html

謝謝你提供的任何幫助！

<!DOCTYPE html> 
<head> 

<link href="css/style.css" type="text/css" rel="stylesheet" /> 
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'> 

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.innerfade.js"></script> 
<script type="text/javascript"> 
$(document).ready(
    function func2(){ 

     $('ul#portfolio').innerfade({ 
      speed: 'slow', 
      timeout: 4000, 
      type: 'sequence', 
      containerheight: '500px' 
     }); 
    } 
); 
</script> 
</head> 
<body onload="func1();func2()"> 

<div id="wholebody"> 
<section id="slideshow"> 
<aside id="slides"> 
<a href="/services.html"><img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" > </a> 
<a href="/services.html"><img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""></a> 
<a href="/services.html"><img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""></a> 
<a href="/portfolio.html"><img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""></a> 
</aside> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="jquery.slides.min.js"></script> 
<script> 
$(function func1() { 
    $('#slides').slidesjs({ 
    width: 980, 
    height: 500, 
    play: { 
     active: true, 
     auto: true, 
     interval: 4500, 
     swap: true, 
     pauseOnHover: true 
    } 
    }); 
}); 
</script> 
</section> 
<aside id="frontbubbles"> 
<aside id="shirtswapfront"> 
<p id="fronttextheader"><a href="shirtswap.html">Shirt Swap!</a></p> 
<ul id="portfolio"> 
<li> 
    <a href=""> 
     <img src="img/1.jpg" alt="" /> 
    </a> 
</li> 
<li> 
    <a href=""> 
     <img src="img/2.jpg" alt="" /> 
    </a> 
</li> 
<li> 
    <a href=""> 
     <img src="img/3.jpg" alt="" /> 
    </a> 
</li> 
<li> 
    <a href=""> 
     <img src="img/4.jpg" alt="" /> 
    </a> 
</li> 
<li> 
    <a href=""> 
     <img src="img/5.jpg" alt="" /> 
    </a> 
</li> 
    <li> 
    <a href=""> 
     <img src="img/6.jpg" alt="" /> 
    </a> 
</li> 
</ul> 
</aside> 
</aside> 
</div>

來源

2014-10-16 Shivermee

你介意把這個放入一個jsFiddle的例子嗎？ – Brian 2014-10-16 18:39:34

嘗試使用bootstrap作爲您的頂級「旋轉木馬」...如果您喜歡，我可以發佈一些代碼示例。這很容易實現。 – BernieSF 2014-10-16 18:50:14

您有兩個jQuery文件包含在導致衝突的相同HTML頁面中。試試這個代碼。

<!DOCTYPE html> 
<head> 

<link href="css/style.css" type="text/css" rel="stylesheet" /> 
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'> 

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="jquery.slides.min.js"></script> 
<script type="text/javascript" src="js/jquery.innerfade.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
     $('ul#portfolio').innerfade({ 
      speed: 'slow', 
      timeout: 4000, 
      type: 'sequence', 
      containerheight: '500px' 
     }); 
    $('#slides').slidesjs({ 
    width: 980, 
    height: 500, 
    play: { 
     active: true, 
     auto: true, 
     interval: 4500, 
     swap: true, 
     pauseOnHover: true 
    } 
    }); 
}); 
</script> 
</head> 
<body> 

<div id="wholebody"> 
<section id="slideshow"> 
<aside id="slides"> 
<a href="/services.html"><img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" > </a> 
<a href="/services.html"><img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""></a> 
<a href="/services.html"><img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""></a> 
<a href="/portfolio.html"><img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""></a> 
</aside> 

</section> 
<aside id="frontbubbles"> 
<aside id="shirtswapfront"> 
<p id="fronttextheader"><a href="shirtswap.html">Shirt Swap!</a></p> 
<ul id="portfolio"> 
<li> 
    <a href=""> 
     <img src="img/1.jpg" alt="" /> 
    </a> 
</li> 
<li> 
    <a href=""> 
     <img src="img/2.jpg" alt="" /> 
    </a> 
</li> 
<li> 
    <a href=""> 
     <img src="img/3.jpg" alt="" /> 
    </a> 
</li> 
<li> 
    <a href=""> 
     <img src="img/4.jpg" alt="" /> 
    </a> 
</li> 
<li> 
    <a href=""> 
     <img src="img/5.jpg" alt="" /> 
    </a> 
</li> 
    <li> 
    <a href=""> 
     <img src="img/6.jpg" alt="" /> 
    </a> 
</li> 
</ul> 
</aside> 
</aside> 
</div>

來源

2014-10-16 19:04:21

抓住jquery文件，我錯過了一開始。 – guildsbounty 2014-10-16 19:08:10

您是否嘗試運行我的代碼？它能解決你的問題嗎？ – 2014-10-16 19:29:06

@BasitNizami對不起，我一直在測試它。儘管如此，我還是無法讓幻燈片顯示出來。我做了一個顯示你告訴我做什麼的頁面。 http://pancakeparadise.com/shirtswap3.html。一個人在你下面的答案提出了一個完美的工作，但我無法重新創建它。謝謝你的幫助！ – Shivermee 2014-10-16 19:37:29

我已經清理你的代碼有點...不使用身體的onload兩種功能，然後定義在後面的代碼的功能之一......嗯這裏有雲，這工作對我來說...

$(document).ready(function func2(){ 
 
\t \t \t $('ul#portfolio').innerfade({ 
 
\t \t \t \t speed: 'slow', 
 
\t \t \t \t timeout: 4000, 
 
\t \t \t \t type: 'sequence', 
 
\t \t \t \t containerheight: '500px' 
 
\t \t \t }); 
 
\t \t }); 
 

 

 
$(document).ready(function func1() { 
 
     $('#slides').slidesjs({ 
 
     width: 980, 
 
     height: 500, 
 
     play: { 
 
      active: true, 
 
      auto: true, 
 
      interval: 4500, 
 
      swap: true, 
 
\t \t pauseOnHover: true 
 
     } 
 
     }); 
 
    });

<div id="wholebody"> 
 
<section id="slideshow"> 
 
<aside id="slides"> 
 
    <a href="/services.html"><img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" /></a> 
 
    <a href="/services.html"><img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/></a> 
 
    <a href="/services.html"><img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/></a> 
 
    <a href="/portfolio.html"><img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/></a> 
 
    </aside> 
 
</section> 
 
<aside id="frontbubbles"> 
 
<aside id="shirtswapfront"> 
 
<p id="fronttextheader"><a href="shirtswap.html">Shirt Swap!</a></p> 
 
<ul id="portfolio"> 
 
\t <li> 
 
\t \t <a href=""> 
 
\t \t \t <img src="http://pancakeparadise.com/img/1.jpg" alt="" /> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href=""> 
 
\t \t \t <img src="http://pancakeparadise.com/img/2.jpg" alt="" /> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href=""> 
 
\t \t \t <img src="http://pancakeparadise.com/img/3.jpg" alt="" /> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href=""> 
 
\t \t \t <img src="http://pancakeparadise.com/img/4.jpg" alt="" /> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href=""> 
 
\t \t \t <img src="http://pancakeparadise.com/img/5.jpg" alt="" /> 
 
\t \t </a> 
 
\t </li> 
 
    \t <li> 
 
\t \t <a href=""> 
 
\t \t \t <img src="http://pancakeparadise.com/img/6.jpg" alt="" /> 
 
\t \t </a> 
 
\t </li> 
 
</ul> 
 
</aside> 
 
</aside> 
 
</div>

現在添加您的CSS和JS文件的頭部像usua我......它應該工作。這裏還有一個小提琴鏈接http://jsfiddle.net/z5yeLq2k/

來源

2014-10-16 19:03:43 Sai

非常感謝您這樣做！我發現它在小提琴中運轉得很好，我試着將它放在我的頁面上，幻燈片仍然不顯示。我一定沒有正確。我製作了這個頁面http://pancakeparadise.com/shirtswap2.html。如果你能告訴我我在那裏做錯了什麼，我會非常感激！ – Shivermee 2014-10-16 19:34:47

得到它解決，正在使用較舊的jQuery。感謝您的幫助！ – Shivermee 2014-10-16 19:53:32

如果你想讓這兩個函數都執行，最簡單的方法是不要把它們放在單獨的函數中，或者不要放在函數中。這裏是我的意思是......

$(document).ready(
    $('ul#portfolio').innerfade({ 
     speed: 'slow', 
     timeout: 4000, 
     type: 'sequence', 
     containerheight: '500px' 
    }); 
    $('#slides').slidesjs({ 
     width: 980, 
     height: 500, 
     play: { 
      active: true, 
      auto: true, 
      interval: 4500, 
      swap: true, 
      pauseOnHover: true 
     } 
    }); 
);

的功能之外，只要執行的document.ready（一旦頁面加載完成），兩者的代碼那件會按順序執行。

編輯：另外，正如在另一個答案中所說，你包括jQuery兩次...不這樣做。

來源

2014-10-16 19:03:47 guildsbounty

把它解決了。感謝您的幫助！ – Shivermee 2014-10-16 19:54:28

在一個頁面上有兩個Javascript，另一個停止工作

回答

相關問題