[英]Horizontal image slider not working in chrome and IE11
我正在構建水平圖像滑塊,但它無法在Chrome和IE11中使用。 關於它的怪異之處在於,它在使用Chrome和IE時確實可以發揮作用。
這是小提琴: https : //jsfiddle.net/7y81hjtx/6/
它在網上: http : //ab-smith.com/wedding/slider.html
請注意,右側的所有圖像(而不是滾動的)如何變得非常小以適合屏幕?
這是相關的HTML
<div class="galleryWrap" id="wrapper">
<table border="0">
<tbody>
<tr>
<td>
<div class="horizontalGalleryImageHolder">
<img id="1" src="http://lorempixel.com/200/200/" style="max-height: 390px;" />
</div>
</td>
<td>
<div class="horizontalGalleryImageHolder">
<img id="2" src="http://lorempixel.com/g/200/200/" style="max-height: 390px;" />
</div>
</td>
<td class="wide">
<div class="horizontalGalleryImageHolder">
<img id="3"src="http://lorempixel.com/400/200/sports/" style="max-height: 390px;" />
</div>
</td>
<td>
<div class="horizontalGalleryImageHolder">
<img id="4" src="http://lorempixel.com/200/200/sports/1/" style="max-height: 390px;" />
</div>
</td>
<td>
<div class="horizontalGalleryImageHolder">
<img id="5" src="http://lorempixel.com/200/200/" style="max-height: 390px;" />
</div>
</td>
<td>
<div class="horizontalGalleryImageHolder">
<img id="6" src="http://lorempixel.com/g/200/200/" style="max-height: 390px;" />
</div>
</td>
<td>
<div class="horizontalGalleryImageHolder">
<img id="7" src="http://lorempixel.com/200/200/sports/" style="max-height: 390px;" />
</div>
</td>
<td>
<div class="horizontalGalleryImageHolder">
<img id="8" src="http://lorempixel.com/200/200/sports/1/" style="max-height: 390px;" />
</div>
</td>
<td>
<div class="horizontalGalleryImageHolder">
<img id="9" src="http://lorempixel.com/200/200/" style="max-height: 390px;" />
</div>
</td>
<td>
<div class="horizontalGalleryImageHolder">
<img id="10" src="http://lorempixel.com/g/200/200/" style="max-height: 390px;" />
</div>
</td>
<td>
<div class="horizontalGalleryImageHolder">
<img id="11" src="http://lorempixel.com/200/200/sports/" style="max-height: 390px;" />
</div>
</td>
<td>
<div class="horizontalGalleryImageHolder">
<img id="12" src="http://lorempixel.com/200/200/sports/1/" style="max-height: 390px;" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
的CSS
.ulWrapper {
margin: 20px auto 0;
display: block;
height: 50px;
}
.ulWrapper ul {
margin: 0 auto;
padding: 0;
display: table;
list-style: none;
}
.ulWrapper li {
float: left;
}
ul
{
list-style-type: none;
}
li{width: 50px; float: left; margin-right: 1px; margin-left: 1px;}
body {
margin: 0;
}
table {
border-collapse: collapse;
}
td.wide{width: 40%;}
td {
width: 20%;
padding: 0px;
}
img {
width: 100%
}
.galleryWrap {
width: 100%;
overflow-x: scroll;
}
.left {
float: left;
width: 100px;
height: 30px;
background-color: blue;
color: white;
}
.right {
float: right;
width: 100px;
height: 30px;
background-color: blue;
color: white;
}
table {
white-space: nowrap;
}
td {
display: inline-block;
}
Java腳本
function left() {
var width = document.getElementById('wrapper').clientWidth;
var offsetWidth = width / 5;
document.getElementById("wrapper").scrollLeft -= offsetWidth;
}
function right() {
var width = document.getElementById('wrapper').clientWidth;
var offsetWidth = width / 5;
document.getElementById("wrapper").scrollLeft += offsetWidth;
}
和JQuery(盡管我很肯定這是可以的)
$('.small-img').click(function () {
var id = $(this).attr('id');
var idNum = id.charAt(1);
if (id.charAt(2) == '0'){
idNum = 10;
}else if(id.charAt(2) == '1'){
idNum = 11;
}else if(id.charAt(2) == '2'){
idNum = 12;
}
document.getElementById(idNum).scrollIntoView();
});
如何恢復滾動條並防止圖像變小?
問題是它不喜歡100%寬度的圖像。 我刪除了它,它開始工作:
img {
width: 100%;
}
然后,我將100%的寬度替換為固定的100px寬度,但仍然可以使用。
我不確定為什么會這樣。 也許瀏覽器不喜歡嘗試找出%大小會導致什么溢出?
希望這可以幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.