我跟踪了蓝藻的官方安装指南。
我下载了最新版本的blueImp (2.25.0)
首先,我包含了css和js:
<!-- Blueimp Gallery -->
<link rel="stylesheet" href="../public/Gallery-2.25.0/css/blueimp-gallery.min.css">
<script src='../public/Gallery-2.25.0/js/blueimp-gallery.min.js'></script>然后我准备了旋转木马:
<div id="blueimp-gallery-carousel" class="image blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>现在我准备了这些照片:
<div id="links">
<a href="../pcs/pic1.png"></a>
<a href="../pcs/pic2.png"></a>
<a href="../pcs/pic3.png"></a>
</div>最后,我加入了一个剧本:
<script src="../js/blueImp.js"></script>...with的内容如下:
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true
}
);
</script>结果:

正如您所看到的,我遵循了安装指南,但是我得到了TypeError:在单击箭头之后,this.slidest是未定义的。我也尝试了2.23.0,同样的错误。
我做错了什么?
测试浏览器:
Mozilla Firefox 52.0.2 (64位),Mozilla for Ubuntu
Mozilla Firefox 52.0.1 (32位),Windows 7
发布于 2017-04-05 14:28:32
我用Jquerys $(document).ready(function(){ ... })将脚本包装在底部解决了这个问题。
$(document).ready(function() {
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true
}
);
});我不明白为什么这是必要的,因为脚本包含在最后一个位置,就在结束正文标记之前。有什么解释吗?
https://stackoverflow.com/questions/43233729
复制相似问题