Цитата:
|
Цитата:
или сразу смена картинок с opacity эффектом |
Цитата:
|
Ну Да там меняется так как надо в 14 посте. Но одна проблема img можно масштабировать? что бы так как в примере http://ironfit.ancorathemes.com
|
Цитата:
<!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>
|
Я удивляюсь вашей голове ... Как вы просто меняете код и добиваетесь эффекта ...
Я наверно неправильно объясняю ... В шаблоне, картинка спортсменов меняется так так и в вашем примере, но масштабирование таи хитрое, оно имеет max-height, а вот по горизонтали всегда 100%. Я так понимаю что это нельзя давится с IMG? |
Цитата:
|
Цитата:
|
<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 |
Обнаружил, что не успевает загружать картинки ... Скрипт работает а картинок нет ... Только на второй проход все картинки отображаются.
Подскажите, как проконтролировать загрузку картинок? |
| Часовой пояс GMT +3, время: 19:36. |