0

好的，我主要处理内容和一些前端设计，但我试图将一个漂亮的图像滑块组合到 iFrame 到我们的网站中。我能够使用 jQuery 构建它，但我遇到了一个小问题。它应该有淡入和淡出，但在第一次旋转时它只使用淡出。下一个旋转它完美地工作。

这是我正在使用的代码

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>



<script type="text/javascript">
$(document).ready(function(){
  slideShow();
});

function slideShow() {

  var showing = $('#ContentContain2 .isshowing');
  var next = showing.next().length ? showing.next() : showing.parent().children(':first');

  showing.fadeOut(800, function() { next.fadeIn(1600).addClass('isshowing'); }).removeClass('isshowing');

  setTimeout(slideShow, 5000);
}

</script>

这是托管它的链接，因此您可以看到问题。

http://ksee.bimedia.net/sites/community/index.html

4

2 回答 2

0

我会将以下内容添加到 css 文件中（或仅将样式应用于各个元素）：

#ContentContain2 img
{
display: none;
}

#ContentContain2 img.isshowing
{
display: inline;
}

这将有效地完成 Set Sail 建议对代码执行的操作：它会隐藏元素，直到调用 fadeIn。

另外，您是否知道 img2 是实际显示的第一件事？如果您希望 img1 首先显示，我会将您的isshowing课程移至 img4 以便脚本淡入 img1 开始。

编辑：这是一个 JSFiddle 来演示：http: //jsfiddle.net/Efbt3/

于 2013-05-09T16:32:54.973 回答
0

尝试先将它们全部隐藏（在淡入之前）。我认为这是罪魁祸首，这可以解释为什么它们在第一个周期（但不是之前）淡出后淡入。您不能从完全不透明中“淡入”。

$(document).ready(function(){
  $("#ContentContain2").children("img").not(".isshowing").hide(); // hide em
  slideShow();
});

function slideShow() {

  var showing = $('#ContentContain2 .isshowing');
  var next = showing.next().length ? showing.next() : showing.parent().children(':first');

  showing.fadeOut(800, function() { next.fadeIn(1600).addClass('isshowing'); }).removeClass('isshowing');

  setTimeout(slideShow, 5000);
}
于 2013-05-09T16:10:16.313 回答