目前我的页面上运行着两个不同的 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>
最佳答案
您在导致冲突的同一 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>
关于javascript - 在一个页面上有两个 Javascript，另一个阻止另一个工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26411522/