1
我在创建我的网站时使用了HTML 5的锅炉板。我正在使用JQuery幻灯片插件插件以及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>
基本上，我们会反正在这里做的，是要被nerf了代码停止。拿出不必要的东西来看清楚事情。所以如果我们必须这样做，为什么不自己做呢？消除所有不必要的因素，只留下那些我们需要解决的问题。另外，删除或替换所有本地文件，如“img/mypicture.jpg”。我们无法访问它们。我确实有想法，可能是什么问题，但是现在你要求我们为你编程。请尊重我们的时间，并减少代码:) –
我已经将HTML隔离到了幻灯片中。我相信问题在于幻灯片甲板JS首先调用css来执行操作，如果在构建DOM之后调用JS，它不会起作用，但我不会对JS有智慧我只是设计幻灯片并离开它是如此。我是否也需要给你幻灯片的JS代码。包含的位置是我可能遇到的问题。它贯穿插件的功能。我最终想做的只是通过HTML5锅炉板附带的插件文件中的所有JS文件。 – tanktery
那么，仍然需要更多的代码（例如：谷歌分析）。但事情变得更加清晰。是的，当然你需要提供JS，因为据我所知，问题出在JS上。但我真的认为，最好是提供现场演示？！与所有的本地文件。我敢打赌，你会得到你的答案快80％:) –