Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.09.2019, 16:35
Аспирант
Отправить личное сообщение для Quark_ Посмотреть профиль Найти все сообщения от Quark_
 
Регистрация: 24.06.2015
Сообщений: 95

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

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Quark_,
$(window).load(function(){
строка 24
Ответить с цитированием
  #3 (permalink)  
Старый 24.09.2019, 17:08
Аспирант
Отправить личное сообщение для Quark_ Посмотреть профиль Найти все сообщения от Quark_
 
Регистрация: 24.06.2015
Сообщений: 95

Сообщение от рони Посмотреть сообщение
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Quark_,
а так?
$(window).on("load" ,function(){
Ответить с цитированием
  #5 (permalink)  
Старый 24.09.2019, 17:36
Аспирант
Отправить личное сообщение для Quark_ Посмотреть профиль Найти все сообщения от Quark_
 
Регистрация: 24.06.2015
Сообщений: 95

Сообщение от рони Посмотреть сообщение
Quark_,
$(window).load(function(){
строка 24
Сообщение от рони Посмотреть сообщение
Quark_,
а так?
$(window).on("load" ,function(){

Баги остались.
Ответить с цитированием
  #6 (permalink)  
Старый 24.09.2019, 18:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

бесконечная карусель fadeout
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Quark_,
CSS slideshow
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос по скрипту для плавного появления текста Godser Общие вопросы Javascript 1 22.11.2013 23:49
Где найти скрипт - Социальный Замок для html ? klimentino Общие вопросы Javascript 1 25.10.2013 06:39
скрипт для браузерки ванка Общие вопросы Javascript 11 11.10.2013 12:20
Посоветуйте пожалуйста скрипт для показа изображений с высоким разрешением Bandicoot Общие вопросы Javascript 0 29.07.2013 22:26
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00