Question

有人能告诉我这个滑块有什么问题吗？当我执行它时，脚本适用于前两张幻灯片然后出现故障。

的CSS：

.slider {
    z-index: 0;
    clear: both;
    position: relative; 
    margin: 0 0 15px 0;
    height: 275px;
}
.slider .jumbo {
    z-index: 0;
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 10px;
}

jquery的：

$(".slider > .jumbo:gt(0)").hide();
setInterval(function() { 
$('.slider > .jumbo:first')
    .show("slide",1000)
    .next()
    .hide(0)
    .end()
    .appendTo('.slider');
},  2000);

网页（滑动节目加速提问）：http://awkwardpetsiblings.x10host.com/

Answer 1

当您启动动画时，jQuery UI会将幻灯片包装在div中作为其动画过程的一部分。然后你的代码立即将你的幻灯片从包装器中移出，并且jQuery UI变得混乱，在重复间隔时留下一些包装器div。

如果您在移动元素后启动动画，它将按预期工作。实例：

var yourDate = new Date(),
    newDate = moment(yourDate).add(17, 'months');

console.log(newDate.format());

$(".slider > .jumbo:gt(0)").hide();
setInterval(function() { 
  $('.slider > .jumbo:first')
	.next()
	.hide()
	.end()
	.appendTo(".slider")
	.show("slide",500)
    ;
},1000);
$("#nv-cntnr-tab1").click(function(){window.open("/","_self")});

.jumbo {position:absolute; top:0;left:0;background:white;width:100%}

JQuery幻灯片故障

1 个答案: