我目前正在制作一个有旋转幻灯片的移动网站。我使用的是最新版本的JQuery Mobile(1.9.1)和Brad Birdsall的swipe.js。
我遇到的问题是,为了查看第一张幻灯片,其中包含#advertising-consumer,我必须将页面向下拖动约10-20px才能加载。一旦我执行它完美的工作,是否有一个已知的错误,或我可以用来模拟这个?
这里有一些代码,以防你需要它。
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>
任何帮助都会非常感激,如果我犯了一个骨头错误,我会因为浪费时间而道歉。