Question

我目前在页面上运行了两个不同的javascripts。一个用于幻灯片放映，另一个用于定时图像交换。我只能让一个或另一个工作，具体取决于代码中哪个脚本较低。我阅读了很多教程，似乎添加<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这两个函数然后在代码中定义其中一个函数......好吧，这就好了，这对我有用......

＆＃13;

$(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
        }
      });
    });

＆＃13;

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

＆＃13;

现在像往常一样在头部添加你的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 ......不要这样做。

在一个页面上有两个Javascripts，另一个停止另一个工作

3 个答案: