Форум

macik · #31 (**permalink**) 20.04.2017, 12:35

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

а вы на своих картинках попробуйте.

Да нет, все как и говорю. две картинки меняются на фон и потом на новую картинку ...

рони · #32 (**permalink**) 20.04.2017, 12:38

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

в id="foto_01"

смотрите ссылку здесь в посте №27 а там пост №14
или
сразу смена картинок с opacity эффектом

рони · #33 (**permalink**) 20.04.2017, 12:39

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

две картинки меняются на фон

нет там такого, есть смена у картинок opacity

macik · #34 (**permalink**) 20.04.2017, 12:48

Ну Да там меняется так как надо в 14 посте. Но одна проблема img можно масштабировать? что бы так как в примере http://ironfit.ancorathemes.com

рони · #35 (**permalink**) 20.04.2017, 13:01

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

Но одна проблема img можно масштабировать?

css строки 9 и 15-16

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .carousel{
    width: 100%;
    position: relative;
  }
  .carousel img{
     position: absolute;
     width: 100%;
     height:  auto;
     opacity: 0;
     border-radius: 8px;
     box-sizing: border-box;
     border: #8B4513 2px solid;
     transition: opacity .8s ease-in;
  }
  .carousel img.show{
    opacity: 1;
  }
   .carousel.vertical{
    width: 170px;
    height: 350px;
   }

  </style>

  <script>
  window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call(document.querySelectorAll(".carousel"), function(el) {
        var img = el.querySelectorAll("img"),
            len = img.length,
            i = len - 1,
            p = el.dataset.pause || 5E3;
        !function g() {
            img[i].classList.remove("show");
            i = ++i % len;
            img[i].classList.add("show");
            window.setTimeout(g, p)
        }()
    })
});
  </script>
</head>

<body>
<div class="carousel" data-pause="3000">
  <img src="http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg" alt="">
  <img src="http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg" alt="">
  <img src="http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg" alt="">
</div>
</body>
</html>

macik · #36 (**permalink**) 20.04.2017, 13:32

Я удивляюсь вашей голове ... Как вы просто меняете код и добиваетесь эффекта ...
Я наверно неправильно объясняю ...
В шаблоне, картинка спортсменов меняется так так и в вашем примере, но масштабирование таи хитрое, оно имеет max-height, а вот по горизонтали всегда 100%. Я так понимаю что это нельзя давится с IMG?

рони · #37 (**permalink**) 20.04.2017, 13:43

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

Я так понимаю что это нельзя давится с IMG?

можно вписать картинку в прямоугольник, эффект тот же что background-size:cover; если долго мучатся или поискать плагин

macik · #38 (**permalink**) 20.04.2017, 14:41

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

можно вписать картинку в прямоугольник, эффект тот же что background-size:cover; если долго мучатся или поискать плагин

можете пример с прямоугольником показать?

macik · #39 (**permalink**) 20.04.2017, 14:58

<style type="text/css">
*{transition:all 3s ease;}
</style>

<script>
var mas = [
			'/images/new/foto_index/01.jpg',
			'/images/new/foto_index/IMG_0875.jpg',
			'/images/new/foto_index/IMG_0985.jpg'
		], i=1;
function csaHead(){
	if(i > (mas.length-1)){
		document.getElementById('foto_index').style.backgroundImage="url('"+mas[0]+"')";
		i=0;
 	}else{
 		document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
 		i++;
 	} 	
}
var intervalCsaHead = setInterval(csaHead,5000);
</script>

Вот что у меня получилось ...
Без IMG а просто div

macik · #40 (**permalink**) 20.04.2017, 15:03

Обнаружил, что не успевает загружать картинки ... Скрипт работает а картинок нет ... Только на второй проход все картинки отображаются.
Подскажите, как проконтролировать загрузку картинок?

Форум

Справочник

Discord чат

Курсы javascript