Question

我正在使用jssor创建淡入淡出的幻灯片。它适用于除iphone和ipads之外的所有设备。在这些设备上，它会跳到白色然后消失。有没有人对此有任何修复。这是我正在使用的代码。

jQuery(document).ready(function ($) {

    var _SlideshowTransitions = [
{ $Duration:1200, $Opacity:2 }
];
var options = {
        $SlideDuration: 800,                                                
        $DragOrientation: 3,                                
        $AutoPlay: true,                                                
        $AutoPlayInterval: 3000,                                        
        $SlideshowOptions: {                                
            $Class: $JssorSlideshowRunner$,                 
            $Transitions: _SlideshowTransitions,
            $TransitionsOrder: 1,
            $ShowLink: true                                               
   }
};

    var jssor_slider1 = new $JssorSlider$('slider1_container', options);

});

   <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 686px; height: 224px;">

<!-- Slides Container -->

<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 686px; height: 224px;">

    <div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/001_CG-external.jpg" /></a></div>

    <div><a u="image" href="/developments/completed/97crookeavenue"><img src="/Publishingimages/slideshow/002_crooke-external.jpg" /></a></div>

<div><a u="image" href="/developments/completed/morrismanor"><img src="/Publishingimages/slideshow/003_MorrisManor-external.jpg" /></a></div>
<div><a u="image" href="/developments/completed/880willoughby"><img src="/Publishingimages/slideshow/004_880-external.jpg" /></a></div>
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/005_CG-lobby.jpg" /></a></div>
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/006_CG-apartment.jpg" /></a></div>
<div><a u="image" href="/developments/completed/97crookeavenue"><img src="/Publishingimages/slideshow/007_Crooke-garden.jpg" /></a></div>
<div><a u="image" href="/developments/completed/97crookeavenue"><img src="/Publishingimages/slideshow/008_Crooke-community-room.jpg" /></a></div>
<div><a u="image" href="/developments/completed/97crookeavenue"><img src="/Publishingimages/slideshow/009_Crooke-bedroom.jpg" /></a></div>
<div><a u="image" href="/developments/completed/880willoughby"><img src="/Publishingimages/slideshow/010_880-garden.jpg" /></a></div>
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/011_CG-courtyard.jpg" /></a></div>
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/012_CGexternal2.jpg" /></a></div>
</div>

Answer 1

尝试在元素上使用-webkit-backface-visibility: hidden;

有关详细信息，请参阅此相关问题：iPhone WebKit CSS animations cause flicker

在ipad上淡化图像之前，jssor淡入淡出为白色

1 个答案: