Почему изображения появляются, а затем исчезают - PullRequest
Новая
       90

Почему изображения появляются, а затем исчезают

1 голос
/ 10 июля 2020

Веб-сайт для проверки

У меня есть 6 изображений для постепенного появления / исчезновения, но первые 5 изображений появляются, как будто они пытаются загрузить изображения до того, как будут работать скользящие изображения. Посмотрите, как появляются первые 5 изображений, а затем они исчезают и появляются по мере работы. Я хочу, чтобы они появлялись и исчезали с самого начала, не всплывая. Что вызывает это?

Не беспокойтесь о части id="liSlider". Это просто отступ в css.

Javascript - 

<script type="text/javascript">
   $("#slideshow > div:gt(0)").hide();

   setInterval(function() {
   $('#slideshow > div:first')
   .fadeOut(5000)
   .next()
   .fadeIn(5000)
   .end()
   .appendTo('#slideshow');
   }, 5000);
</script>

HTML - 

<div id="slideshow">
    <div id="liSlider"><a href="{base_url}ntouchdesktop"><img src="{base_url}assets/images/svrsv2/SVRS_Homepage-Slide_2.png"></a></div>
    <div id="liSlider"><a href="https://www.sorenson.com/wavello" target="_blank"><img src="{base_url}assets/images/svrsv2/SVRS_Homepage-Slide_1.png"></a></div>
    <div id="liSlider"><a href="{base_url}ntouchmobile"><img src="{base_url}assets/images/svrsv2/SVRS_Homepage-Slide_5.png"></a></div>
    <div id="liSlider"><a href="{base_url}ntouchdesktop"><img src="{base_url}assets/images/svrsv2/SVRS_Homepage-Slide_6.png"></a></div>
    <div id="liSlider"><a href="{base_url}ntouchmobile"><img src="{base_url}assets/images/svrsv2/SVRS_Homepage-Slide_3.png" ></a></div>
    <div id="liSlider"><a href="{base_url}ntouchmobile"><img src="{base_url}assets/images/svrsv2/SVRS_Homepage-Slide_4.png"></a></div>
</div>

1 Ответ

0 голосов
/ 10 июля 2020

Вы можете использовать CSS, чтобы скрыть все слайды, а затем скрыть первый из них при загрузке.

Обновленная демонстрация: https://jsfiddle.net/7pd4uxq6/3/

CSS

#slideShow {
  position: relative;
}

.liSlider { // note class
  display: none;
  position: absolute;
}

JS

$('#slideshow > div:first').fadeIn(500) // updated

setInterval(function() {
   $('#slideshow > div:first')
   .fadeOut(5000)
   .next()
   .fadeIn(5000)
   .end()
   .appendTo('#slideshow');
}, 5000);
...