Блог

Я использую популярный плагин на этом сайте:

http://demos.discipleportal.com/MTO/

По какой-то причине в IE 7 и 8, Chrome и Safari изображения нижнего уровня отображаются, когда изображения исчезают в первом цикле. Итак, вы видите, что находится под следующим слайдом, когда он затухает. Не уверен, как это исправить.

скрипт:

 $('.slideshow').cycle({     
        fx:    'fade', 
        speed:    2500,
        timeout:  6000
    }); 
  

HTML:

 <div class="slideshow">
<img src="images/p1.jpg" alt="" class="first" /> 
<img src="images/p2.jpg" alt="" height="427" width="329" /> 
<img src="images/p3.jpg" alt="" height="427" width="329" /> 
<img src="images/p4.jpg" alt="" height="427" width="329" /> 
<img src="images/p5.jpg" alt="" height="427" width="329" /> 
<img src="images/p6.jpg" alt="" height="427" width="329" /> 
<img src="images/p7.jpg" alt="" height="427" width="329" /> 
<img src="images/p8.jpg" alt="" height="427" width="329" /> 
<img src="images/p9.jpg" alt="" height="427" width="329" /> 
</div>
  

css:

 .slideshow {
height: 427px;
left: 50px;
position: absolute;
top: 495px;
width: 329px;
z-index: 10;
}
  

Любая помощь очень ценится

Я еще не тестировал это, но вы всегда можете добавить класс «hide» к другим изображениям и установить для него значение display: none; А затем просто «переключать» классы между «hide» и «show» (или как вы решите их называть.

Я где-то читал, чтобы придать контейнеру черный фон, что я и сделал. Это помогло мне с некоторыми проблемами с пикселями в IE7. So:

 .slideshow {
background-color: #000000;
height: 427px;
left: 50px;
position: absolute;
top: 495px;
width: 329px;
z-index: 10;
}
  

Попробовать не помешает 😉

ИСПРАВЛЕНА ПРОБЛЕМА.

Я заменил сокращенный скрипт на полную версию, и это решило проблему. Спасибо за помощь Майки и Луи.