var numberImage = 0;
var zoomArray = new Array(2);
var reductionArray = new Array(2);
var leftArray = new Array(2);
var rightArray1 = new Array(2);
var rightArray2 = new Array(2);
var images = new Array(2);
var zIndex0 = new Array(2);
var zIndex1 = new Array(2);
var zIndex2 = new Array(2);
zoomArray[0] = document.getElementById('image-1');
zoomArray[1] = document.getElementById('image-3');
zoomArray[2] = document.getElementById('image-2');
reductionArray[0] = document.getElementById('image-2');
reductionArray[1] = document.getElementById('image-1');
reductionArray[2] = document.getElementById('image-3');
leftArray[0] = document.getElementById('image-3');
leftArray[1] = document.getElementById('image-2');
leftArray[2] = document.getElementById('image-1');
images[0] = document.getElementById('image1');
images[1] = document.getElementById('image2');
images[2] = document.getElementById('image3');
zIndex0[0] = document.getElementById('image3');
zIndex0[1] = document.getElementById('image2');
zIndex0[2] = document.getElementById('image1');
zIndex1[0] = document.getElementById('image2');
zIndex1[1] = document.getElementById('image1');
zIndex1[2] = document.getElementById('image3');
zIndex2[0] = document.getElementById('image1');
zIndex2[1] = document.getElementById('image3');
zIndex2[2] = document.getElementById('image2');
rightArray1[0] = document.getElementById('image1');
rightArray1[1] = document.getElementById('image1');
rightArray1[2] = document.getElementById('image1');
rightArray2[0] = document.getElementById('image2');
rightArray2[1] = document.getElementById('image1');
rightArray2[2] = document.getElementById('image1');
images[1].style.webkitTransform = 'scale(1.2)'; //
document.getElementById('next').onclick = function next(){
numberImage ++;
zIndex2[numberImage].style.zIndex = '2'; //
zIndex1[numberImage].style.zIndex = '1'; //
zIndex0[numberImage].style.zIndex = '0'; //
zoomArray[numberImage].style.webkitTransform = 'scale(1.2)'; //
reductionArray[numberImage].style.webkitTransform = 'scale(1)'; //
rightArray1[numberImage].style.right = '-450px'; //
rightArray2[numberImage].style.right = '-300px'; //
leftArray[numberImage].style.right = '750px'; //
//numberImage2 ++;TeSt01
//numberImage3 ++;
}
Примечание:
HTML
<div class="slideshow">
<ul id="images">
<li><div id="image1"></div></li>
<li><div id="image2"></div></li>
<li><div id="image3"></div></li>
</ul>
<p id="preview"><</p>
<p id="next">></p>
</div>
Примечание:
css
body{
background-color: #ccc;
font-family: Verdana;
}
*{
margin: 0px;
padding: 0px;
-webkit-transition: all .5s;
}
li{
list-style: none;
}
#image1,
#image2,
#image3{
width: 450px;
height: 300px;
background-color: #333;
float: left;
overflow: hidden;
display: block;
position: relative;
background-size: 130%;
-webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.41);
-moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.41);
box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.41);
}
/*
*
http://freelancefolder.com/wp-content/uploads/12-strange-wordpress-portfolio-theme-dark.png
*
http://0.s3.envato.com/files/163840/Screenshots/01_Home.__large_preview.jpg
*
http://cdnm.tutorialchip.com/wp-content/uploads/2011/11/Yin-Yang-Light-and-Slick-WP-Portfolio-Theme-520x264.png
*/
#image1{
background-image: url(http://freelancefolder.com/wp-content/uploads/12-strange-wordpress-portfolio-theme-dark.png);
z-index: 0;
right: -150px;
}
#image2{
background-image: url(http://0.s3.envato.com/files/163840/Screenshots/01_Home.__large_preview.jpg);
z-index: 1;
}
#image3{
background-image: url(http://cdnm.tutorialchip.com/wp-content/uploads/2011/11/Yin-Yang-Light-and-Slick-WP-Portfolio-Theme-520x264.png);
z-index: 0;
right: 150px;
}
#preview,
#next{
color: #333;
text-decoration: none;
float: left;
}
.slideshow{
height: 300px;
width: 1350px;
-webkit-transform: scale(.9);
margin: 100px auto;
}
Примечание:
если поможете, обещаю выложить результат на доступ всем
Примечание:
спасибо за помощь, Shini, сейчас буду исправлять, как только справлюсь, дам тебе результат и признаю твой ответ лучшим
Примечание:
оно должно прокручиваться
Примечание:
images[numberImage1].style.zIndex = '2';
images[numberImage2].style.zIndex = '1';
images[numberImage3].style.zIndex = '0';
images[numberImage1].style.webkitTransform = 'scale(1.2)';
images[numberImage2].style.webkitTransform = 'scale(1)';
images[numberImage1].style.right = '-450px';
images[numberImage2].style.right = '-300px';
images[numberImage3].style.right = '750px';
вот код эффекта, который должен происходить
Примечание:
http://jsbin.com/anaViDU/1/edit
Примечание:
Должно быть аналогично, может лучше использовать плагин roundabout? Просто на словах меня все будут ругать за использование чужих исходников, а на деле будут говорить что лучше их использовать так как это быстрее. Ссылка на сайт, если не лень, можешь даже написать инструкцию на русском по настройке этого плагина
http://fredhq.com/projects/roundabout