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％:) –