j轮播每次点击图像时初始化/刷新/重新加载
jCarousel initializing/refreshing/reloading each time clicked on image
我正在使用jCarousel(http://sorgalla.com/projects/jcarousel/)进行图片预览,但面临一个问题:我不知道如何重新加载/刷新jCarousel动态列表。
我有几类图像。当我单击其中一张图片时,我需要创建列表并从该元素开始预览。我有一些代码,但不知道如何在单击预览从其他图像开始的其他图像后重新创建所有列表。这是我的代码:
$(document).ready(function(){
$("ul#stage li").live('click', function() {
var ul = $(this).parent();
var index = +(ul.children().index(this))+1;
var mycarousel_itemList = [ ];
$('li[data-id]').each(function () {
var $this = $(this);
mycarousel_itemList.push({
url : $this.attr("data-img"),
title : $this.attr("data-title")
});
});
function mycarousel_itemLoadCallback(carousel, state) {
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
}
};
function mycarousel_getItemHTML(item) {
return '<img src="' + item.url + '" width="800" height="600" alt="' + item.url + '" />';
};
alert(index);
jQuery('#mycarousel').jcarousel({
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback},
size: mycarousel_itemList.length,
scroll: 1,
start: index,
wrap: 'last',
animation: 'fast',
visible: 1
});
document.getElementById('popup-content').style.background='url('+$(this).attr("data-img")+') no-repeat center';
document.getElementById('fades').style.display='block';
document.getElementById("light").style.display = "block";
$("#light").fadeTo("slow", 1);
});
});
一切都是这样:有图像>我点击其中一个带有 jCarousel 和一张可见图像的>弹出节目,然后我可以滚动浏览所有其他图像。
它工作得很好,但只是第一次。当我单击其他图像(关闭弹出窗口后)时,视图从最后打开的图像开始。
如果有些事情不够清楚 - 请问。我会尽量让它更精确。感谢您的帮助!
您可以重新创建 jCarousel,首先使用 $('#mycarousel').remove(); 然后再次初始化 jCarousel。我真的不明白你想做什么,但这在大多数情况下会有所帮助,当然 jCarousel 应该有 Destroy 方法,但它没有。
为什么在某些情况下不使用jquery选择器?
相关文章:
- 无法使用javascript插件在首次运行时加载实际图像大小(图像在刷新后加载)
- 数据表 AJAX 筛选器重新加载数据
- JQuery AJAX - 如何使用方法 GET 调用刷新/重新加载页面
- 滚动到页面顶部,而不刷新/重新加载该页面
- socket.io”;“连接”;刷新/重新加载时的事件不会激发
- 如何从HTML源刷新/重新加载DataTable
- 刷新/重新加载angularjs自定义指令
- 如何在新加载的页面上执行(下拉)操作
- Jquery UI + Google Maps v3 API 仅在刷新后加载
- 根据上一个选项卡的选择器重新加载选项卡
- 如何使用 url 哈希在刷新后加载特定页面
- 获得“中止,因为不接受 0”并使用反应热加载器重新加载整页
- Ajax 发布到 httpost 操作方法,无需刷新特殊加载
- Google Maps API 不会在 Internet Explorer 9 中刷新时加载
- yii2:使用 Pjax 更新/刷新/重新加载页面,与请求页面不同
- 咕噜咕噜的手表:实时加载重新加载落后 1 步....
- Nivo滑块在第一页加载时不显示图像,但在刷新时加载
- 谷歌地图仅在“刷新”后加载
- 流星集合不会在刷新时加载
- 使用PHP或Javascript检测页面刷新或新加载