在一个页面上有两个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，另一个停止工作

回答

相关问题