我目前正在制作一个具有旋转幻灯片的移动网站。我正在使用最新版本的 JQuery Mobile (1.9.1) 和 Brad Birdsall 的 swipe.js。
我遇到的问题是,为了查看其中包含#advertising-consumer 的第一张幻灯片,我必须将页面向下拖动大约 10-20 像素才能加载。一旦我执行它,它就可以完美运行,是否有一个已知的错误,或者我可以用来模拟这个的脚本?
这是一些代码,以备不时之需。
html
body
<div data-role="page" data-theme="a" id="port">
<div data-role="header" class="header-index" data-position="inline"> <a href="#index" data-rel="back" class="ui-btn-left ui-btn-back" data-icon="arrow-l">Back</a>
<div class="logo-interior"><a href="index.php"><img src="images/spacer.png" width="75" height="40" alt="logo"></a></div>
</div>
<div data-role="content" data-theme="a" style="width:320px; margin-left:0px; margin-right:0px;">
<div id='mySwipe' style='max-width:320px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div>
<div class="portfolio-image" id="advertising-consumer">
<p class="portfolio-subhead-orange">Advertising</p>
</div>
<p class="portfolio-body">Text goes here</p>
</div>
<div>
<div class="portfolio-image" id="animation">
<p class="portfolio-subhead-orange">Animation & Video</p>
</div>
<p class="portfolio-body">Text goes here</p>
</div>
</div>
</div>
<script src='js/swipe.js'></script>
<script>
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide: 0,
// auto: 3000,
// continuous: true,
// disableScroll: true,
// stopPropagation: true,
// callback: function(index, element) {},
// transitionEnd: function(index, element) {}
});
</script>
</body>
</html>
任何帮助将不胜感激,如果我犯了一个愚蠢的错误,我很抱歉浪费时间。