我正在使用jcarousel.js
插件来订购我的应用程序中具有轮播效果<ul>
的图像列表。jQuery Mobile
每次我初始化我的页面时,图像都是不同的(来自 WS)所以在我设置它们之后我这样<ul>
称呼它:
$('#imagesPageDiv').live('pagebeforeshow', function (e, data) {
jQuery('#carouselDiv').jcarousel({ visible: 4, scroll: 2});
});
它工作正常。
每个图像都必须具有URL
相同的大图像。回到同一页面时会出现问题。
我不想从一开始就设置图像,想在点击之前完全回到相同的图像和位置(图像位置)。我设置flag
了,所以基本上我知道我什么时候回来,什么时候从头开始。因此,我尝试在导航到下一页之前保存所有页面,并在返回后再次将其附加到页面:
globalDivContent = $('#imagesPage #box');
返回该页面后,我将其附加:
$("#imagesPage").empty();
$("#imagesPage").append(globalDivContent );
真正获得与真实图像和位置相同的 courosel 存在一个问题:它不滚动。箭头是可点击的,但没有做任何事情
我在启动页面和返回页面时比较了代码,它相似。任何想法我该如何实现我的想法?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />
<script src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.9.1.min.js"></script>
<script src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$('#imagesPage').live('pageshow', function (event, ui) {
jQuery('#carouselDiv').jcarousel({visible:2});
});
</script>
</head>
<body>
<div data-role="page" id="imagesPage">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<ul id="carouselDiv" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="65" height="65" alt=""/></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="65" height="65" alt=""/></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="65" height="65" alt=""/></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="65" height="65" alt=""/></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="65" height="65" alt=""/></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="65" height="65" alt=""/></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="65" height="65" alt=""/></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="65" height="65" alt=""/></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="65" height="65" alt=""/></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="65" height="65" alt=""/></li>
</ul>
</div>
</div>
</body>
</html>