Коллеги, помогите, пожалуйста, разобраться с более точной настройкой слайд-шоу.
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>