Форум

Quark_ · #1 (**permalink**) 24.09.2019, 16:35

С помощью гугла сделал скрипт для плавного появления изображений, но по непонятной мне причине он иногда не срабатывает вообще, иногда частично (грузятся не до последнего изображения или какое-то в середине цикла выпадает).

<div class="gallery"><img src="images/01.jpg" alt="" /> <img src="images/02.jpg" alt="" /> <img src="images/03.jpg" alt="" /> <img src="images/04.jpg" alt="" /> <img src="images/05.jpg" alt="" /> <img src="images/06.jpg" alt="" /></div>

var imstoshow=[];
var busy=false;
function runShow(){
 if(busy){runShow();}
 if(imstoshow.length==0){return;}
 busy=true;
 var im=imstoshow.shift();
 im.animate({'opacity': '1'}, 250, function(){im.removeClass('hidden'); setTimeout(runShow, 50)});
 busy=false;
}

function addImgs(im){
 if(busy){addImgs(im);}
 var offset=getCurrentTop()+$(window).height();
 im.each(function(){
  var i=$( this );
  var imof=i.offset().top+20;
  if(imof<offset){
   imstoshow.push($( this ));
  }
 });
}

$(document).ready(function(){
 var im=$('.gallery img');
 addImgs(im);
 runShow();
});

Подскажите плиз, в чем косяк?

рони · #2 (**permalink**) 24.09.2019, 16:58

Quark_,

$(window).load(function(){

строка 24

Quark_ · #3 (**permalink**) 24.09.2019, 17:08

Сообщение от рони

Quark_,

$(window).load(function(){

строка 24

Появилась ошибка
Uncaught TypeError: e.indexOf is not a function at w.fn.init.w.fn.load

Использую jQuery v3.3.1

рони · #4 (**permalink**) 24.09.2019, 17:26

Quark_,
а так?

$(window).on("load" ,function(){

Quark_ · #5 (**permalink**) 24.09.2019, 17:36

Сообщение от рони

Quark_,

$(window).load(function(){

строка 24

Сообщение от рони

Quark_,
а так?

$(window).on("load" ,function(){

Баги остались.

рони · #6 (**permalink**) 24.09.2019, 18:18

Quark_,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.swiper-container {
  width: 60%;
  height: 90vh;
  position: relative;
  overflow: hidden;
   margin: 20px auto;
}
.swiper-slide {
  width: 100%;
  height: 100%;
  position: absolute;
   transition: .8s;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
   z-index:
}
.swiper-slide.fadeOut {

    opacity: 0;
}

</style>

  <script>
document.addEventListener('DOMContentLoaded', function() {
      var Img = document.querySelectorAll(".swiper-slide"),
        ImgLength = Img.length,
        ImgIndex = 0;

        function show()
        {
        Img[ImgIndex].classList.remove("fadeOut");
        window.setTimeout(hide, 2000);
        }
        function hide()
        {
        Img[ImgIndex].classList.add("fadeOut");
        ImgIndex++;
        ImgIndex %= ImgLength;
        window.setTimeout(show, 100);
        }

        show()
  });

  </script>
</head>

<body>

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide fadeOut"><img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"></div>

<div class="swiper-slide fadeOut"><img src="https://www.wonderplugin.com/videos/demo-image0.jpg"></div>

<div class="swiper-slide fadeOut"><img src="https://www.theglobeandmail.com/resizer/cGAbGpC_6dJvungK4E_3iPM0ENI=/620x0/filters:quality(80)/arc-anglerfish-tgam-prod-tgam.s3.amazonaws.com/public/AZWCHIIOVNFPREIW4I55573SRE.JPG"></div>

</div>

</div>
</body>
</html>

рони · #7 (**permalink**) 24.09.2019, 18:20

Quark_,
CSS slideshow

Форум

Справочник

Discord чат

Курсы javascript