Я тут пишу javascript карусель, знаю есть куча готовых, но хочется написать свою, к тому же если подключать к примеру какой-либо плагин, там в нем будет куча ненужного мне и это будет способствовать более длительной загрузке сайта. У меня не получается создать эффект вращения, вместо этого получается эффект тассовки. Код выложу в примечаниях.
Примечание:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>
Примечание:
CSS
body {
background-color: #fafafa;
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);
}
#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;
}
Примечание:
JS
$(document).ready(function(){
$("#image-1").css("-webkit0transform","scale(1.2)");
var zoom = 0,
reduction = 0,
left = 0,
right = 0;
var zoomArray = new Array(2),
reductionArray = new Array(2),
leftArray = new Array(2),
rightArray = new Array(5);
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');
rightArray[0] = document.getElementById('image-2');
rightArray[1] = document.getElementById('image-1');
rightArray[2] = document.getElementById('image-3');
rightArray[3] = document.getElementById('image-1');
rightArray[4] = document.getElementById('image-2');
rightArray[5] = document.getElementById('image-3');
$("#next").click(function(){
images[numberImage2].style.webkitTransform = 'scale(1.2)';
document.getElementById('next').onclick = function next(){
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';
//numberImage1 ++;
//numberImage2 ++;
//numberImage3 ++;
});
});
Примечание:
работайте в jsbin, там все просто, и ссылки на скрипты/стили указывать не надо
Примечание:
в jsbin тоже так можно =) только надо зарегестрироваться
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.