X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Нужна консультация по настройке слайд-шоу
Theage
Theage
Topic Starter сообщение 4.9.2013, 3:05; Ответить: Theage
Сообщение #1


Коллеги, помогите, пожалуйста, разобраться с более точной настройкой слайд-шоу.

1. Почему первая картинка двигается только в Chrome? IE и Mozilla первую картинку показывают статичной.

2. Как применить нужный эффект перемещения к самой первой картинке? По логике это отрабатывают строчки 36-42. Но что не меняй, все равно bottom left.

3. После окончания цикл начинает повторяться в неправильном порядке - вместо 1-2-3-4 становится 2-3-4.

Сам эффект вот здесь.

Код следующий.
<style>
#slideshow {
-webkit-transform-style:preserve-3d;
position:relative;
width:614px;
height:410px;
overflow:hidden;
border:8px solid #505050;
-webkit-box-shadow:1px 1px 5px #000;
-moz-box-shadow:1px 1px 5px #000;
-ms-box-shadow:1px 1px 5px #000;
-o-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
}
#slideshow img {
position:absolute;
width:717px;
height:479px;
top:50%;
left:40%;
margin-left:-330px;
margin-left:-330px;
margin-top:-240px;
opacity:0;
-webkit-transition-property: opacity, -webkit-transform;
-webkit-transition-duration: 6s, 10s;
-moz-transition-property: opacity, -moz-transform;
-moz-transition-duration: 6s, 10s;
-ms-transition-property: opacity, -ms-transform;
-ms-transition-duration: 6s, 10s;
-o-transition-property: opacity, -o-transform;
-o-transition-duration: 6s, 10s;
transition-property: opacity, transform;
transition-duration: 6s, 10s;
}
#slideshow img {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
}
#slideshow :nth-child(2n+1) {
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
}
#slideshow :nth-child(3n+1) {
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
}
#slideshow :nth-child(4n+1) {
-webkit-transform-origin: bottom right;
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-o-transform-origin: bottom right;
transform-origin: bottom right;
}
}
/**
* hack to get the top images out of the stack when the first one is styled
* what we really need is to take care of the two last ones in the stack, but
* it is more 'flexible' to go with the selector below as the only one we
* really don't want to send 'behind' is the one right after the first one (#2).
*/
#slideshow .fx:first-child + img ~ img {z-index:-1;}
#slideshow .fx {
opacity:1;
-webkit-transform: scale(1.2) translate(30px);
-moz-transform: scale(1.2) translate(30px);
-ms-transform: scale(1.2) translate(30px);
-o-transform: scale(1.2) translate(30px);
transform: scale(1.2) translate(30px);
}
</style>
</head>
<header>
<div id="slideshow">
<img src="http://theage.ru/images/vega12b/vega12b-9.jpg" alt="">
<img src="http://theage.ru/images/jupiter9/jupiter9-6.jpg" alt="">
<img src="http://theage.ru/images/jupiter9/jupiter9-27.jpg" alt="">
<img src="http://theage.ru/images/zuiko5014/zuiko5014-5.jpg" alt="">
</header>
<script>
(function(){
document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
window.setInterval(kenBurns, 8000);
var images = document.getElementById('slideshow').getElementsByTagName('img'),
numberOfImages = images.length,
i = 1; // we want to start with the second image as the first one is styled onload
function kenBurns() {
// if we have gone through all images, we reset the variable for the loop
if(i==numberOfImages){ i = 0;}
images[i].className = "fx";
// we can't remove the class from the previous element or we'd get a bouncing effect so we clean up the one before last
// there must be a smarter way to do this though
if(i===0){ images[numberOfImages-2].className = "";}
if(i===1){ images[numberOfImages-1].className = "";}
if(i>1){ images[i-2].className = "";}
i++;
}
})();
</script>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Galen
Galen
сообщение 6.9.2013, 17:16; Ответить: Galen
Сообщение #2


[JS](function(){
var images = document.getElementById('slideshow').getElementsByTagName('img'),
numberOfImages = images.length,
i = 1,
cur = 0;
images[0].className = "fx";
window.setInterval(kenBurns, 8000);

function kenBurns() {
if(i == numberOfImages) i = 0;
images[i].className = "fx";
images[cur].className = "";
cur = i;
i++;
}
})();
[/JS]

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужна ли плоская структура категорий в ИМ?
1 noviktamw 1064 26.3.2024, 21:50
автор: c4p1t4l15t
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыСостояние после ампутации - нужна помощь
благотворительный топик
46 vitvirtual 5560 12.3.2024, 21:52
автор: Гиппопотам
Открытая тема (нет новых ответов) Нужна рассылка по емаил базе сео-студий
0 kasey7 622 2.3.2024, 23:13
автор: kasey7
Горячая тема (нет новых ответов) Человеку нужна своя квартира/дом?
187 metvekot 13954 21.2.2024, 22:39
автор: spomoni
Открытая тема (нет новых ответов) Нужна работа
0 filatd 706 12.1.2024, 17:08
автор: filatd


 



RSS Текстовая версия Сейчас: 29.3.2024, 3:04
Дизайн