0

我正在为首页制作褪色幻灯片。图像是全宽的。这是我的代码；

<div id="slider">
    <img src="<?=base_url()?>assets/display/photo/slider/dental_clinick.jpg" alt="dental clinick" title="dental clinick" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/hospital_staff.jpg" alt="Hospital Staff Mohmand Hospital" title="Hospital Staff Mohmand Hospital" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/laboratory_test.jpg" alt="Laboratory Test Mohmand Hospital" title="Laboratory Test Mohmand Hospital" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/operation_theater.jpg" alt="Operation Theator Mohmand Hospital" title="Operation Theator Mohmand Hospital" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/operation_theator_staff.jpg" alt="Operation Theator Staff Mohmand Hospital" title="Operation Theator Staff Mohmand Hospital" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/xray.jpg" alt="X-Ray Mohmand Hospital" title="X-Ray Mohmand Hospital" class="img"/>
</div>

这是jquery；

$('.img:gt(0)').hide();
setInterval(function(){
  $('.img:first-child').fadeOut()
     .next('.img').fadeIn(5000)
     .end().appendTo('#slider');}, 
  2000);

似乎图像被放在另一个之下。当它转为淡出让下一张图像淡入时，它显示向下移动并且下一张图像出来。如何解决这个问题呢 ？

4

1 回答 1

1 
#slider{position:relative;overflow:hidden}
#slider img{position:absolute;top:0;right:0}

这是一个 jsfiddle 供您查看： http: //jsfiddle.net/kingmotley/PWvaP/2/ 这是另一个使用 img 标签而不是类的 jsfiddle，并且仅将 img 隐藏在滑块中：http://jsfiddle。净/kingmotley/PWvaP/3/

于 2013-06-26T16:09:17.740 回答