Question

很抱歉，如果这是重复的，但是我不知所措，试图找出我要去的地方，并且真的可以用新的眼睛。我正在构建一个MVC应用程序，并且在标签中有一个3d轮播，该轮播旨在旋转并显示一系列图像。它已插入我的代码中，并且可以在Chrome，Edge和Firefox中完美运行-到目前为止，一切都很好。我遇到的问题是IE11-轮播仅显示为固定位置围绕屏幕旋转的平面图像，而不是（如在Chrome等上）像一系列随着用户移动而旋转的图像前进或后退。

在视图中，我有这个：

<div class="rowX rowImage">
    <div class="col-xs-12"  style="background-color:#54cbec;">
        <div class="container">
            <div class="row padding-bottom5px">
                <div class="col-xs-12 padding-top40px padding-bottom50px carousel" data-gap="60">
                    <figure style="float:right; width:90%;">
                        <img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="A" />
                        <img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="" />
                        <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="" />
                        <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="" />
                        <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="" />
                        <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="" />
                    </figure>
                    <nav>
                        <button class="nav prev">Prev</button>
                        <button class="nav next">Next</button>
                    </nav>
                </div>
            </div>
        </div>
    </div>

这是由如下所示的JavaScript文件驱动的：

if (document.addEventListener) {
    //window.addEventListener('load', () => {
        var carousels = document.querySelectorAll('.carousel');

        for (var i = 0; i < carousels.length; i++) {
            //console.log(":" + carousels[i]);
            carousel(carousels[i]);
        }
    //});
}
$(function () {
    var carousels = document.querySelectorAll('.carousel');

    for (var i = 0; i < carousels.length; i++) {
        //console.log(":" + carousels[i]);
        carousel(carousels[i]);
    }
});

function carousel(root) {
    var
        figure = root.querySelector('figure'),
        nav = root.querySelector('nav'),
        images = figure.children,
        n = images.length,
        gap = root.dataset.gap || 0,
        bfc = 'bfc' in root.dataset,

        theta = 2 * Math.PI / n,
        currImage = 0
    ;

    setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
    $(window).on('resize', function () {
        setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
    });
    //window.addEventListener('resize', () => {
    //    setupCarousel(n, parseFloat(getComputedStyle(images[0]).width))
    //});

    setupNavigation();

    function setupCarousel(n, s) {
        var
            apothem = s / (2 * Math.tan(Math.PI / n))
        ;

        //figure.style.transformOrigin = `50% 50% ${-apothem}px`;
        figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

        for (var i = 0; i < n; i++)
            //images[i].style.padding = `${gap}px`;
            images[i].style.padding = gap + 'px';
        for (i = 1; i < n; i++) {
            //images[i].style.transformOrigin = `50% 50% ${-apothem}px`;
            //images[i].style.transform = `rotateY(${i * theta}rad)`;
            images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
            images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
        }
        if (bfc)
            for (i = 0; i < n; i++)
                images[i].style.backfaceVisibility = 'hidden';

        rotateCarousel(currImage);
    }

    function setupNavigation() {
        nav.addEventListener('click', onClick, true);

        function onClick(e) {
            e.stopPropagation();

            var t = e.target;
            if (t.tagName.toUpperCase() != 'BUTTON')
                return;

            if (t.classList.contains('next')) {
                currImage++;
            }
            else {
                currImage--;
            }

            rotateCarousel(currImage);
        }

    }

    function rotateCarousel(imageIndex) {
        //figure.style.transform = `rotateY(${imageIndex * -theta}rad)`;
        figure.style.transform = 'rotateY(' + imageIndex * theta + 'rad)';
    }

}

CSS文件：

.container {
    width: 100%;
    max-width: 1200px;
}


.container.tbl {
    width: 100%;
}

.container.tbl .td.col-dummy-spacer{
    border-style: solid;
    border-width: 0px 30px 0px 0px;
}

@media only screen and (max-width: 767px){ 
    .container.tbl.tbl-collapse-xs>.tr>.td {
        display: inline-block;
    }
    .container.tbl .td.col-dummy-spacer {
        border-width: 0px 0px 15px 0px;
    }
}

.padding-bottom5px{ padding-bottom: 5px; }
.padding-top40px{ padding-top: 40px; }
.padding-bottom50px{ padding-bottom: 50px; }

.carousel {
    padding: 20px;
    -webkit-perspective: 500px;
    perspective: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel > * {
  flex: 0 0 auto;
}

.carousel figure {
    margin: 0;
    width: 70%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
}

.carousel figure img {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0px;
}

.carousel figure img:not(:first-of-type) {
    position: absolute;
    left: 0;
    top: 0;
}

.carousel nav {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}

.carousel nav button {
  flex: 0 0 auto;
  margin: 0 5px;
  cursor: pointer;
  color: #333;
  background: none;
  border: 1px solid;
  letter-spacing: 1px;
  padding: 5px 10px;
}

@media only screen and (max-width: 991px) {
    .navBtn {
        display: none !important;
    }
    .navLinks {
        font-size:16px;
    }
}

我还是MVC的新手，这使我更加狂热（尽管，公平地说，我很可能在Web表单中没有同样的问题-血腥的IE）。我不能保证星期五中奖彩票的号码，但是如果您能提供帮助，您将一生奉献我一生。...

Answer 1

确保将供应商前缀添加到Javascript。

`

function getSupportedPropertyName(properties) {
    for (var i = 0; i < properties.length; i++) {
        if (typeof document.body.style[properties[i]] != "undefined") {
            return properties[i];
        }
    }
    return null;
}

var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; 
var item = document.querySelector("#theItem");
var transformProperty = getSupportedPropertyName(transform); 
if (transformProperty) {
    item.style[transformProperty] = "rotate(45deg)";
}

`

MVC轮播无法在IE11中运行

1 个答案: