我用javascript创建了一个简单的图像旋转器,但它对于“较旧的浏览器”(例如IE 6,7和8)速度较慢。图像将首先加载我认为,然后启动旋转器..一些技巧,使其更快?Javascript image rotator在较旧的浏览器中速度较慢
为什么我自己创造了一个旋转器?我发现的所有旋转器都会剪切(剪切)图像。我需要完整的图像......必要时有一些空白左/右或上/下。
JavaScript部分:
//Loop through pictures
var tid = setInterval(mycode, 3000);
function mycode() {
if($.random(0,1) == 1){
//Fade
$('#alleplaatjes img.active').fadeOut(500,function(){
$(this).removeClass();
if($(this).next().length == 0){
$('#alleplaatjes img').first().fadeIn(500);
$('#alleplaatjes img').first().addClass('active');
} else {
$(this).next().fadeIn(500);
$(this).next().addClass('active');
}
});
} else {
//Slide
$('#alleplaatjes img.active').slideUp(500,function(){
$(this).removeClass();
if($(this).next().length == 0){
$('#alleplaatjes img').first().slideDown(500);
$('#alleplaatjes img').first().addClass('active');
} else {
$(this).next().slideDown(500);
$(this).next().addClass('active');
}
});
}
};
PHP部分:
<?php
$dir = "/home/zwuq/domains/***/public_html/afbeelding/";
foreach(glob($dir."*") as $file){
$afbeelding = 'afbeelding/'.str_replace($dir, '', $file);
$toevoeging = FALSE;
if(!$eerste_plaatje){
$toevoeging = ' class="active"';
$eerste_plaatje = $afbeelding;
}
$plaatjes .= '<img'.$toevoeging.' src="'.$afbeelding.'" style="max-width: 99%; max-height: 99%;">';
}
?>
HTML部分:
<div id="alleplaatjes" style="width:100%; height:100%; margin:0px; padding:0px; z-index:1; text-align: center;">
<? echo $plaatjes; ?>
</div>
定义 “旧的浏览器”? – 2011-12-20 18:22:56
你只是指旧版浏览器,还是说旧版浏览器的旧版电脑? – jprofitt 2011-12-20 18:24:26
刚刚添加:)例如IE6,7和8 – Roy 2011-12-20 18:25:57