Скрипт для плавного появления изображений
С помощью гугла сделал скрипт для плавного появления изображений, но по непонятной мне причине он иногда не срабатывает вообще, иногда частично (грузятся не до последнего изображения или какое-то в середине цикла выпадает).
<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(); }); Подскажите плиз, в чем косяк? |
Quark_,
$(window).load(function(){строка 24 |
Цитата:
Появилась ошибка Uncaught TypeError: e.indexOf is not a function at w.fn.init.w.fn.load Использую jQuery v3.3.1 |
Quark_,
а так? $(window).on("load" ,function(){ |
Цитата:
Цитата:
Баги остались. |
бесконечная карусель 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> |
Quark_,
CSS slideshow |
Часовой пояс GMT +3, время: 07:29. |