旋轉表中的圖像

我正在試驗一下我在jsFiddle上找到的圖像推子旋轉器。由於圖像總是與表格邊框重疊，因此我在表格中存在包含圖像的問題。有沒有辦法確保桌子的高度與圖像的高度相同（我的桌子是用百分比定義的）。下面是代碼：旋轉表中的圖像

$('.fadein img:gt(0)').hide(); 
 

 
setInterval(function() { 
 
    $('.fadein :first-child').fadeOut() 
 
    .next('img') 
 
    .fadeIn() 
 
    .end() 
 
    .appendTo('.fadein'); 
 
}, 4000); // 4 seconds

.fader { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%px; 
 
} 
 
.fadein { 
 
    position: relative; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<table border="1" width=100% class="fader"> 
 
    <tr> 
 
    <td width="70%"> 
 
     <div class="fadein"> 
 

 
     <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"> 
 

 
     </div> 
 
    </td> 
 
    <td>testing 123</td> 
 
    </tr> 
 
</table>

來源

2016-01-22 Dan W

我不認爲你其實可以嵌套表格單元格中的'div'。另外，以'/>'結尾來關閉你的圖片標籤。當你插入圖像時，你的單元格應該自動縮放。另外，爲什麼你的css的寬度是100％px，而且如果你確定div的寬度和高度，它可能無法正確縮放，因爲它具有由單元大小確定的值，而不是它裏面的圖像。 – somethinghere

我剛把你的代碼變成了一個代碼片段，當你運行它時，它似乎按照需要工作。問題是什麼？你看到什麼問題？ – somethinghere

@somethinghere是的，你可以把div裏面td http://stackoverflow.com/questions/3117454/html-w3c-valid-elements-is-div-valid-within-a-td – squaleLis

我相信你的問題可能來自一個事實，即時間量小，圖像的2同時出現造成重疊問題到來。

如果你添加一些delay()你的功能，那麼它應該排序你的問題。

$('.fadein img:gt(0)').hide(); 
 

 
setInterval(function() { 
 
    $('.fadein :first-child').fadeOut('500').next().delay('400').fadeIn('500').end().appendTo('.fadein'); 
 
    setTimeout(function() { 
 
    $('.fadein :first-child').css('display', 'block'); 
 
    }, 400); 
 
}, 4000);

.fader { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.fadein { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
.fadein img { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<table border="1" width=100% class="fader"> 
 
    <tr> 
 
    <td width="70%" class="fadein"> 
 

 
     <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> 
 
     <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"> 
 

 
    </td> 
 
    <td>testing 123</td> 
 
    </tr> 
 
</table>

來源

2016-01-22 11:04:23 Stewartside

謝謝你，似乎有幫助的問題。現在唯一的問題是，圖片和桌子底部邊界之間有一個微小的差距。任何想法如何解決這個問題？ –

@DanW現在看到我修正的答案。它的原因是'fadeIn（）'使項目變成'inline'而不是所需的'block'。一點額外的代碼，它應該按預期工作:) – Stewartside

謝謝你 –

旋轉表中的圖像

回答

相關問題