0

我正在尝试制作一个简单的幻灯片，并且在使用 internet explorer 7 时遇到了一些困难。

导航默认隐藏，以防用户没有 js。如果它们滑动，那么一个箭头会淡入淡出，它在除 ie7 之外的所有浏览器中都能完美运行。在 ie7 中，整个幻灯片会跳下几个像素 - 我相信这与显示有关：没有设置，然后在淡入淡出时更改，但我不太明白。

HTML：

<div class="wrap">

        <nav class="home-slideshow">
            <a href="#" onclick="return false"><img src="img/arrow-left.gif" class="arrow-left" height="22" width="13"></a>
            <a href="#" onclick="return false"><img src="img/arrow-right.gif" class="arrow-right" height="22" width="13"></a>
        </nav>

        <ul class="home-slideshow">
            <li>
                <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
            </li>
            <li>
                <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
            </li>
            <li>
                <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
            </li>
        </ul>

    </div> <!-- end wrap -->

JS：

// home feature slideshow

    // add navigation
    $('.arrow-right').show();

    // navigation
    $('.arrow-right').on('click', (function() {

        if ($(':animated').length) {
            return false;
        }

        ul = $('ul.home-slideshow');

        noOfSlides = 3;
        width = noOfSlides * 960;
        lastSlide = width - 960;
        currentPos = parseInt(ul.css('margin-left'));

        ul.css('width', width);

        ul.animate({
            "margin-left": currentPos - 960
        }, 1500, "easeInOutQuint", function() {

            if (ul.css('margin-left') == '-' + lastSlide + 'px') {
                $('.arrow-right').fadeOut();
            } else {
                $('.arrow-left').fadeIn();
            } // end if

        }); // end animate

    })); // end arrow-right click

    $('.arrow-left').on('click', (function() {

        if ($(':animated').length) {
            return false;
        }

        ul = $('ul.home-slideshow');

        noOfSlides = 3;
        width = noOfSlides * 960;
        lastSlide = width + 960;
        currentPos = parseInt($(ul).css('margin-left'));

        ul.css('width', width);

        ul.animate({
            "margin-left": currentPos + 960
        }, 1500, "easeInOutQuint", function() {

            if (ul.css('margin-left') == '0px') {
                $('.arrow-left').fadeOut();
            } else {
                $('.arrow-right').fadeIn();
            } // end if

        }); // end animate

    })); // end arrow-left click

CSS：

/* Feature Slideshow */
ul.home-slideshow {
    height: 302px;
    overflow: hidden;
}

    ul.home-slideshow li {
        float: left;
    }

    /* Navigation */
    nav.home-slideshow {
        position: relative;
        width: 960px;
    }

    .arrow-left, .arrow-right {
        background: #003592;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        display: none;
        height: 22px;
        padding: 6px;
        top: 126px;
        position: absolute;
        width: 13px;
        z-index: 1;
    }
        .arrow-right {
            right: 0px;
        }
        .arrow-left {
            left: 0px;
        }

任何人都可以建议解决此问题吗？

4

2 回答 2

1

可能是这样的：（尽管一切看起来都很完美）

尝试将 Ul home-slideshow 向上移动并将 nav 移动到其下方，看看这是否有效：

<div class="wrap">

    <ul class="home-slideshow">
        <li>
            <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
        </li>
        <li>
            <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
        </li>
        <li>
            <a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
        </li>
    </ul>

    <nav class="home-slideshow">
        <a href="#" onclick="return false"><img src="img/arrow-left.gif" class="arrow-left" height="22" width="13"></a>
        <a href="#" onclick="return false"><img src="img/arrow-right.gif" class="arrow-right" height="22" width="13"></a>
    </nav>

</div> <!-- end wrap -->
于 2012-11-16T11:13:11.437 回答
0

嗨，0Neji，我在我的一个项目中遇到了一些 z-index 问题，我使用此代码片段来解决 ie z-index 问题：

看看这是否有效，或者你可以在这里玩这些数字：（我也玩过为我做这项工作）

var zIndexNumber = 1000;
$('li').each(function() {
  $(this).css('zIndex', zIndexNumber);
      zIndexNumber -= 10;
});
于 2012-11-16T11:42:32.373 回答