一页上有两个Javascript，另一个则阻止了另一个

Question

我的网页上目前有两种不同的JavaScript。 一个用于幻灯片放映，另一个用于定时图像交换。 我只能使其中一个工作，这取决于哪个脚本在代码中较低。 我阅读了许多教程，似乎添加<body onload="func1();func2()">可以解决问题，但没有解决。

我做了两个示例页面

可以进行图像交换但无法显示幻灯片的地方

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>

Answer 1

您在同一HTML页面中包含两个导致冲突的jQuery文件。 试试这个代码。

<!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>

Answer 2

我已经整理了一下您的代码...不要在两个函数上都使用body onload，而是在以后的代码中定义其中一个函数...在这里，对我来说这很有效...

 $(document).ready(function func2(){ $('ul#portfolio').innerfade({ speed: 'slow', timeout: 4000, type: 'sequence', containerheight: '500px' }); }); $(document).ready(function func1() { $('#slides').slidesjs({ width: 980, height: 500, play: { active: true, auto: true, interval: 4500, swap: true, 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"> <li> <a href=""> <img src="http://pancakeparadise.com/img/1.jpg" alt="" /> </a> </li> <li> <a href=""> <img src="http://pancakeparadise.com/img/2.jpg" alt="" /> </a> </li> <li> <a href=""> <img src="http://pancakeparadise.com/img/3.jpg" alt="" /> </a> </li> <li> <a href=""> <img src="http://pancakeparadise.com/img/4.jpg" alt="" /> </a> </li> <li> <a href=""> <img src="http://pancakeparadise.com/img/5.jpg" alt="" /> </a> </li> <li> <a href=""> <img src="http://pancakeparadise.com/img/6.jpg" alt="" /> </a> </li> </ul> </aside> </aside> </div>

现在像往常一样在头中添加css和js文件...应该可以工作。 这也是它的小提琴链接http://jsfiddle.net/z5yeLq2k/

Answer 3

如果要同时执行这两个函数，最简单的方法是不将它们放在单独的函数中，或者根本不将它们放在函数中。 这就是我的意思

$(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 ...不要那样做。

一页上有两个Javascript，另一个则阻止了另一个

问题描述

3 个解决方案

解决方案1
2 已采纳 2014-10-16 19:04:21

解决方案2
0 2014-10-16 19:03:43

解决方案3
0 2014-10-16 19:03:47

一页上有两个Javascript，另一个则阻止了另一个

问题描述

3 个解决方案

解决方案1 2 已采纳 2014-10-16 19:04:21

解决方案2 0 2014-10-16 19:03:43

解决方案3 0 2014-10-16 19:03:47

解决方案1
2 已采纳 2014-10-16 19:04:21

解决方案2
0 2014-10-16 19:03:43

解决方案3
0 2014-10-16 19:03:47