Question

我是StackOverflow的新手，所以我希望每个人都能忍受我。我是一名对Jquery有一定经验的webdesigner，但我肯定不是很好。我主要使用插件，并在必要时可以对代码进行一些调整。

我目前正在使用液体布局的摄影网站。我在主页上加入了Jquery循环插件，以帮助展示照片。我最初遇到插件问题，因为它使用了很多绝对定位。我最终能够在研究问题的过程中借助我发现的一些代码来解决这些问题（我已经丢失了我发现代码的网站，所以如果有人认出它，我会很乐意给予信任）。

我现在让页面完美运行，除了一个问题 - IE不会生成淡入淡出过渡。它将显示第一张图像，在整个屏幕上显示空白，然后显示下一张图像。我花了几个小时研究这个问题，但没有找到解决方案。我找到了一个论坛，有人建议为骑行元素添加固定的高度和宽度，但这个修复对我不起作用。它确实使图像淡入，但它们消失了并再次创建了空白屏幕，然后在下一个图像中消失。

淡入淡出功能在Firefox和Chrome中完美运行。我目前没有在网站上淡出，但作为参考，这里是网址：http://www.jnicholasphoto.com

这是Javascript：

SetHeightToTallestChild('.slideshow');
$(function() {
  $('.slideshow').cycle({
        fx: 'scrollDown',               
        speed: 2000,
        timeout:5000,
        random: 1,
        cleartypeNoBg:true
    });
});  
$(window).resize(function() {
  SetHeightToTallestChild('.slideshow');
});



 });
function SetHeightToTallestChild(i) {
var tallest = 0;
$(i).children().each(function(){
  var h = $(this).height();
  if(h > tallest)
  tallest = h;
});
$(i).height(tallest);
}

HTML：

div class='photo floatr' id='photo'> 
    <div class='slideshow cycle-main-frame clearfix' > 
        <div class='cycle-main-frame-row'> <img src="images/collage1.png"  alt='J Nicholas Photography' /></div> 
        <div class='cycle-main-frame-row'> <img src="images/collage2.png"  alt='J Nicholas Photography' /></div> 
        <div class='cycle-main-frame-row'> <img src="images/three.png"  alt='J Nicholas Photography' /></div> 
        <div class='cycle-main-frame-row'> <img src="images/collage3.png"  alt='J Nicholas Photography' /></div> 
        <div class='cycle-main-frame-row'> <img src="images/collage4.png"  alt='J Nicholas Photography' /></div> 

    </div>

CSS（与周期图像相关）：

.photo {
  padding: 15px 0px 15px 15px;
  margin: 0px;
  margin-top: 35px;
  width: 65%;
  }
.photo img {
  width: 100%;
  position: relative;
  display: block;
  border: 8px solid #2F2E29;
  border-right: none;
  }
.cycle-main-frame {
  width: auto !important;
  position: relative !important;
  overflow: visible !important;
}
.cycle-main-frame-row {
  width: auto !important;
  position: relative !important;
  height: 0 !important;
  }

Answer 1

在

$(function() {
  $('.slideshow').cycle({
        fx: 'scrollDown',               
        speed: 2000,
        timeout:5000,
        random: 1,
        cleartypeNoBg:true
    });
});

将fx部分更改为

        fx: 'fade',

Answer 2

IE 8不支持淡化透明PNG。 IE 9做得很好。

您将要创建if语句并检测不透明度支持：

if(!jquery.support.opacity) {

    // run IE slideshow

} else {

    // run slideshow for browsers that support opacity

}

Jquery Cycle Fade过渡在IE中不起作用

2 个答案: