jCarousel - 滚动丰富的最后一个元素后的第一个项目

时间:2016-04-01 15:19:21

标签: javascript jquery css jcarousel

我的jcarousel组件有问题。组件工作正常,就在第一次滚动完成并重新启动后(它是关于圆形滚动),未显示前3个元素(显示空白项目)。滚动以第3个元素开始。

此问题仅在第一次滚动完成后,第二次滚动开始。否则按正确的顺序工作,也显示所有项目。

我的代码如下:



$(document).ready(function() {
	$('#mycarousel').jcarousel({
		wrap : 'circular',
		scroll : 1,
		auto: 1,
		vertical : true,
		animation : 400,
		initCallback : function(carousel, state) {
			if (state == 'init') {
				carousel.clip.hover(function() {
					carousel.stopAuto();
					addAlertMessage(carousel);
				}, function() {
					carousel.startAuto();
				});
	
				
			}
		}
		
	
	});
});

.jcarousel ul {
	width: 20000em;
	position: relative;
	/* Optional, required in this case since it's a <ul> element */
	list-style: none;
	margin: 0;
	padding: 0;
}

.jcarousel li.alertMessageStyle {
	/* Required only for block elements like <li>'s */
	float: left;
	width: 100%;
	height: 60px;
	background-color : #FF6666;
}

.jcarousel li.infoMessageStyle {
	/* Required only for block elements like <li>'s */
	float: left;
	width: 100%;
	height: 60px;
	background-color : #99FF99;
}

.jcarousel li {
	/* Required only for block elements like <li>'s */
	float: left;
	width: 100%;
	height: 60px;
	background-color : #FF6666;
}

.jcarousel p {
	font-weight: bold;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
	font-size: 14px;
	vertical-align: middle;
	text-indent: 25px;
	
}

.alertMessagePanelStyle {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 50px;
	margin-top:10px;
	border-style: solid;
	border-width: 2px;
}
&#13;
<div id="alertMessagePanelId" class="alertMessagePanelStyle">
		<ul id="mycarousel" class="jcarousel">
			<li><p>Alert Message: 1</p></li>
			<li><p>Alert Message: 2</p></li>
			<li><p>Alert Message: 3</p></li>
			<li><p>Alert Message: 4</p></li>
			<li><p>Alert Message: 5</p></li>
			<li><p>Alert Message: 6</p></li>
		</ul>
</div>

    
&#13;
&#13;
&#13;

有人有类似的东西吗?

0 个答案:

没有答案