我在创建我的网站时使用HTML 5样板。我正在使用JQuery slide deck插件以及JQuery漂亮的照片插件。在锅炉板中，javascrit文件位于页面底部，但这会导致幻灯片插件停止工作。
当我在页面顶部包含插件时，它可以正常工作，但当它放在底部时会停止。 include命令在两种情况下都是相同的：首先加载Jquery而不是插件。随后的HTML是正在运行的HTML。在页面的底部，我已经注释掉了无效的代码。
我知道HTML 5样板文件包含所有脚本启动代码的脚本文件，以及所有插件代码的插件文件。但是我还没有通过将它们放在这些文件中来获取我使用过的插件。任何帮助都会很棒。
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Basics - A blog and magazine template</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/prettyPhoto.css">
<link rel="stylesheet" href="css/slidedeck.css">
<link rel="stylesheet" href="css/slidedeck.ie.css">
<script src="js/libs/modernizr-1.7.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
<!-- scripts concatenated and minified via ant build script-->
<!--<script src="js/plugins.js"></script>
<script src="js/script.js"></script>-->
<script src="js/functions.js"></script>
<script src="js/slidedeck.js"></script>
<!-- end scripts-->
</head>
<body>
<div id="container">
<!-- Slider -->
<div id="sliderSection">
<div class="cAlign">
<div id="slidedeckFrame" class="skin-slidedeck">
<dl class="slidedeck">
<dt>Slide 1 name</dt>
<dd>
<a href="#"><img src="http://lorempixum.com/190/190/abstract" alt="Abstract" class="borderImg" /></a>
<h1>This is slide 1</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
<div class="blankSeparator"><!-- --></div>
<p><a class="buttonLink" href="#">Read more about this</a></p>
</dd>
<dt>Slide 2</dt>
<dd>
<a href="#"><img src="http://lorempixum.com/190/190/abstract" alt="Abstract" class="borderImg" /></a>
<h1>This is slide 1</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. </p>
<div class="blankSeparator"><!-- --></div>
<p><a class="buttonLink" href="#">Read more</a></p>
</dd>
<dt>Slide 3</dt>
<dd>
<h1>This is slide 3</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</dd>
<dt>Slide 4</dt>
<dd>
<h1>This is slide 4</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</dd>
</dl>
<!-- Activate the slider -->
<script>
$('.slidedeck').slidedeck();
</script>
</div> <!-- end skin-slidedeck -->
</div> <!-- end cAlign -->
</div> <!-- end of sliderSection -->
</div> <!-- end of #container -->
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>-->
<!-- scripts concatenated and minified via ant build script-->
<!--<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<script src="js/functions.js"></script>
<script src="js/slidedeck.js"></script>
<!-- end scripts-->
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix("img, .png_bg");</script>
<![endif]-->
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>
</html>
答案 0 :(得分：1)
好的，看看复制代码和现场演示之间的区别。实际上，我应该马上发现这个问题..但是我的眼睛在我自己的编辑颜色上工作得更好。
您的问题可能是您在页脚中添加了slidedeck.js。它必须坐在标题中。我强烈建议在jquery之后。并且jquery也必须位于标题中而不是页脚中。
<强> http://kopli.pri.ee/stackoverflow/6972756.php
正如你所看到的，一切正常。你不能在页脚中添加插件，你可以在页脚中添加functions.js等，但不能在jquery和插件中添加。
完整的工作代码
（顺便说一下，这就是你从不必要的东西中剔除代码的方式）
<head>
<title></title>
<base href="http://epecho.com/tst/">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slidedeck.css">
<link rel="stylesheet" href="css/slidedeck.ie.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script src="js/slidedeck.js"></script>
</head>
<body>
<div id="container">
<div id="sliderSection">
<div class="cAlign">
<div id="slidedeckFrame" class="skin-slidedeck">
<dl class="slidedeck">
<dt>Slide 1 name</dt>
<dd>
<a href="#"><img src="http://lorempixum.com/190/190/abstract" alt="Abstract" class="borderImg" /></a>
<h1>This is slide 1</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
<div class="blankSeparator"><!-- --></div>
<p><a class="buttonLink" href="#">Read more about this</a></p>
</dd>
<dt>Slide 2</dt>
<dd>
<a href="#"><img src="http://lorempixum.com/190/190/abstract" alt="Abstract" class="borderImg" /></a>
<h1>This is slide 1</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. </p>
<div class="blankSeparator"><!-- --></div>
<p><a class="buttonLink" href="#">Read more</a></p>
</dd>
<dt>Slide 3</dt>
<dd>
<h1>This is slide 3</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</dd>
<dt>Slide 4</dt>
<dd>
<h1>This is slide 4</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</dd>
</dl>
<script>
$('.slidedeck').slidedeck();
</script>
</div>
</div>
</div>
</div>
</body>
</html>