javascript - 水平图像 slider 在 chrome 和 IE11 中不起作用

Question

我正在构建一个水平图像 slider ，但它在 Chrome 和 IE11 中不起作用。它的奇怪之处在于它在使用 Chrome 和 IE 时确实在 fiddle 中工作。

这是 fiddle :https://jsfiddle.net/7y81hjtx/6/

它在网上:http://a-b-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;
}

Javascript

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

如何恢复滚动条并防止图像变小？

Answer 1

问题是它不喜欢 100% 宽度的图像。我删除了它并开始工作:

img {
  width: 100%;
}

然后我用固定的 100px 宽度替换了 100% 宽度，它仍然有效。

我不确定这是为什么。也许浏览器不喜欢尝试计算出应该溢出 % 大小的内容？

希望这对您有所帮助。