我试图让一个小图片库为我的一个朋友拍摄3张照片。 它适用于IE8 +,Opera,Firefox和Chrome,但不适用于Safari,我无法弄清楚原因。
所以这里是代码,它与body-tag中的onLoad一起使用。有趣的是,toogle文本在safari上效果很好,但图片根本没有。
JS:
function refGo()
{
var bgCounter = 0;
var naCounter = 0;
names = [
"Heimkino Gewinnspiel",
"Traumwochenende Gewinnspiel",
"SG Diana Schondorf"
];
backgrounds = [
"Referenzen/heimkino.png",
"Referenzen/traumwe.png",
"Referenzen/sgdiana.png"
];
function changeBackground()
{
$( " #refText" ).slideToggle( "slow", function() {
naCounter = (naCounter+1) % names.length;
jQuery('#refText').text(names[naCounter]);
});
$( " #refChange" ).slideToggle( "slow", function() {
bgCounter = (bgCounter+1) % backgrounds.length;
$('#refChange').css('background', 'url('+backgrounds[bgCounter]+') no-repeat scroll center center / cover');
});
$( " #refChange " ).slideToggle( "slow", function() {
});
$( " #refText " ).slideToggle( "slow", function() {
jQuery('#refText').text(names[naCounter]);
setTimeout(changeBackground,5000);
});
}
changeBackground();
}
HTML:
<a href="referenzen.html"><h2 style="float: left; width:400px; margin-top: 15px;">Referenzen</h2>
<div class="refStartpage">
<div class="news" id="refChange"> </div>
<div id="refText"></div>
</div>
</a>
的CSS:
#refText {
font-style: italic;
}
#refChange {
float: left;
height: 200px;
margin-left: 20px;
margin-top: 15px;
width: 380px;
}
.refStartpage {
float: left;
height:400px;
width:380px;
}
如果有人可以帮助我,我真的很难受! 谢谢!