Question

我正在为首页制作淡出幻灯片。图像是全宽的。这是我的代码;

<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);

似乎图像正在一个接一个地放置。当它转向fadout以使下一个图像为淡入淡出时，它显示向下移动并且下一个图像出现。如何解决这个问题？

Answer 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.net/kingmotley/PWvaP/3/

全宽图像不能放置在具有指定宽度和高度的固定位置

1 个答案: