Question

有没有办法在页面上有两个javascript脚本而不会发生冲突并跳过其中一个脚本？

如果是这样的话？

我正在尝试使用下面的小提琴，但转换不起作用，我相信这是因为我在同一页面上有下面的javascript。也许我错了

<script>
var bgArr = [
 'images/bg1.jpg',
'images/bg2.jpg',
'images/bg3.jpg',
'images/bg4.jpg',
'images/bg5.jpg',
'images/bg6.jpg',
'images/bg7.jpg',
'images/bg8.jpg',
'images/bg9.jpg',
'images/bg10.jpg'];

document.body.style.backgroundImage = 'url(' + bgArr[10] + ')';
bgCur = 0;
backgroundSwitch = function () {
if (bgCur == bgArr.length) bgCur = 0;
document.body.style.backgroundImage = 'url(' + bgArr[bgCur++] + ')';
}
window.setInterval(backgroundSwitch, 6000); // Switch every 6 seconds.
</script>

Answer 1

您的网页上有两个<script>元素。第一个动画侧边栏并需要jQuery。第二个设置背景图像的旋转，但不需要jQuery。

第一个<script>元素中的代码导致抛出Uncaught ReferenceError: $ is not defined错误并退出执行。浏览器仍在第二个<script>元素中执行代码，因此看起来第一个<script>被跳过。

您需要包含jQuery库。您可以从自己的服务器上提供服务，也可以使用以下内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

您还需要将侧边栏的代码放在文档就绪处理程序中：

$(document).ready(function() {
    $("div.leftContainer")
        .css("margin-left",-$(this).width())
        .animate({
            marginLeft:0
        }, 1000);
});

否则浏览器将尝试在它引用的元素存在之前执行它。

注意：jsfiddle设置为在页面加载时执行代码，因此它不需要包含在文档就绪处理程序中的代码。

如何在页面上放置多个脚本标签而不跳过一个标签

1 个答案: