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

0

こんにちは 0Neji 私のプロジェクトの 1 つで、Z インデックスに関するいくつかの問題がありました。このコード スニペットを使用して、Z インデックスの問題を解決しました。

これが機能するかどうか、またはここで数字で遊ぶことができるかどうかを確認してください:(私もこれを機能させるためにプレイしました)

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