我正在使用 royal slider .我将以下代码直接插入到我的网站 HTML 中(注意:url 已被省略)...
<!-- jQuery, 1.7+ is required -->
<script src="url"></script>
<!-- main slider JS, get it from build tool http://dimsemenov.com/private -->
<script src="url"></script>
<!-- main slider style -->
<link href="url">
<!-- selected skin style -->
<link href="url" rel="stylesheet">
`<!-- slider css -->
<style>
/* you may put here additional slider CSS */
/* but it'll be better if you move it to separate CSS file that your site uses */
</style>
并将以下内容放入正文中以测试...
<div id="content-slider" class="royalSlider contentSlider rsDefault">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
</div>
<script type="text/javascript">// <![CDATA[
// Slider initialization, you may put this part of code in JS file
jQuery(document).ready(function($) {
// slider initialization
$('#content-slider').royalSlider({
// example of slider options
controlNavigation: 'bullets',
autoPlay: {
enabled: true
},
deeplinking: {
enabled: true,
prefix: 'slider-'
}
});
});
// ]]></script>
幻灯片似乎根本没有加载。任何建议或帮助将不胜感激!
更新:
我输入了以下内容:
<div id="content-slider" class="royalSlider contentSlider rsDefault">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
</div>
<head>
// All your <head> content goes here
<script type="text/javascript">
$(document).ready(function(){
// slider initialization
$('#content-slider').royalSlider({
// example of slider options
controlNavigation: 'bullets',
autoPlay: {
enabled: true
},
deeplinking: {
enabled: true,
prefix: 'slider-'
}
});
});
</script>
</head>
并将代码更新为以下...
<div id="content-slider" class="royalSlider contentSlider rsDefault">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
</div>
<p>// All yourcontent goes here</p>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
// slider initialization
$('#content-slider').royalSlider({
// example of slider options
controlNavigation: 'bullets',
autoPlay: {
enabled: true
},
deeplinking: {
enabled: true,
prefix: 'slider-'
}
});
});
// ]]></script>
最佳答案
你应该尝试把你的 <script>在 <head>而不是 body . $(document).ready()已经负责等待页面加载。
像这样尝试:
<head>
// All your <head> content goes here
<script type="text/javascript">
$(document).ready(function(){
// slider initialization
$('#content-slider').royalSlider({
// example of slider options
controlNavigation: 'bullets',
autoPlay: {
enabled: true
},
deeplinking: {
enabled: true,
prefix: 'slider-'
}
});
});
</script>
</head>
关于jQuery 幻灯片不会加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13947522/