0

我正在尝试为移动网站创建一个小幻灯片。

这是html：

<div id="gallery">
    <a id="prev" data-icon="arrow-l" data-iconpos="left" data-role="button" href="#">Previous Image</a>
<div class="gallery-pic">
    <img class="slider" src="images/gallery/chateau-slider-1.jpg" />
</div>
<a id="next" data-icon="arrow-r" data-iconpos="right" data-role="button" href="#">Next Image</a>
</div>

这是jquery代码：

$(document).ready( function() {

        var height = $('.slider').height();
        $('.gallery-pic, .slider').css('min-height',height);

        $('#prev').click(function(prev) {
            prev.preventDefault();
            var nameImg = $('img.slider').attr('src').split('/');
            var fileName = nameImg[2].split('-');
            var exp = fileName[2].split('.');
            var numImg = parseInt(exp[0]);
            if(numImg == 1) {
                numPrevImg = 18; }
            else {
            var numPrevImg = numImg - 1; }
            $('img.slider').fadeOut(500, function() {
                $('img.slider').attr('src','images/gallery/chateau-slider-' + numPrevImg + '.jpg');
                $('img.slider').fadeIn("slow");
            });
        });


        $('#next').click(function(next) {
            next.preventDefault();
            var nameImg = $('img.slider').attr('src').split('/');
            var fileName = nameImg[2].split('-');
            var exp = fileName[2].split('.');
            var numImg = parseInt(exp[0]);
            if(numImg == 18) {
                numNextImg = 1; }
            else {
            var numNextImg = numImg + 1; }
            $('img.slider').fadeOut(500, function() {
                $('img.slider').attr('src','images/gallery/chateau-slider-' + numNextImg + '.jpg');
                $('img.slider').fadeIn("slow");
            });
        });
    });

基本上，它搜索下一个图像并更改 src 属性。

容器（.gallery-pic）在 1/2 秒内变小，即使我使用了 min-height 属性。请注意，我在使用 Safari for iPhone 时遇到了这个问题。在浏览器中一切正常。

请帮帮我，我快疯了。

谢谢

4

1 回答 1

1

基本上，您为容器设置了不同的大小。确保你的容器有一个固定的高度和宽度，并且它不会扩展以适应它的孩子。当您更改 src 时，一瞬间内部没有图像，因此无需扩展它以适应某些大小。

在 CSS 中更改它，一切都应该没问题。

我正在通过 iPhone 模拟器查看您的网站。

您正在从 HTML 标记或 javascript 中将 min-height 设置为 0，这会覆盖您的 min-height:160px;set from CSS!!!!

此外，如果您将最小高度设置为 160 像素，并且您有一个高度大于 160 像素的图像，您肯定也会看到这种效果。在图像进入扩展它之前，容器会变得稍微小一些。

于 2012-12-18T10:43:08.293 回答