Цитата:
|
j0hnik,
вопрос в другом: можно ли как-то иначе сделать анимацию на классах? может есть способ без window.setTimeout? |
не про то подумал |
Цитата:
|
Рони , я свою работу доделаю сейчас, попробую на классах сделать.
|
слайдер на js
Цитата:
:write: вспомнил хак, убрал таймер, проверь в опере пропадёт анимация(быстрая смена, вместо плавной) или нет, кликать много раз.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
* { box-sizing: border-box;margin: 0;padding: 0; }
.slider {
width: 300px;
height: 170px;
overflow: hidden;
position: relative;
}
.slider__arrow {
width: 20px;
height: 20px;
position: absolute;
top: 50%;
background-color: #3294FD;
text-align: center;
line-height: 20px;
color: #fff;
z-index: 9;
cursor: pointer;
}
.slider__left { left: 0; }
.slider__right { right: 0; }
.slider__container {
width: 900px;
height: 170px;
position: absolute;
top: 0;
left: 0;
}
.slider__item {
width: 100px;
height: 170px;
line-height: 170px;
background: pink;
display: block;
float: left;
text-align: center;
}
.slider__item:hover {
background-color: #F7F7F7;
}
.slider__arrow.hide{
display: none;
}
.slider {
margin: 20px auto;
}
.slider__container.animate{
transition: left 1.2s cubic-bezier(.455, .03, .515, .955);
}
.slider__container.left{
left: -100px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var left = document.querySelector(".slider__left"),
right = document.querySelector(".slider__right"),
container = document.querySelector(".slider__container");
right.addEventListener("click", function() {
var last = container.querySelector(".slider__item:last-child");
var first = container.querySelector(".slider__item:first-child");
container.classList.remove("animate");
if (!container.classList.contains("left")) {
container.classList.add("left");
container.insertBefore(last, first);
}
document.documentElement.clientWidth;
container.classList.add("animate");
container.classList.remove("left")
});
left.addEventListener("click", function() {
var first = container.querySelector(".slider__item:first-child");
container.classList.remove("animate");
if (container.classList.contains("left")) {
container.classList.remove("left");
container.appendChild(first)
}
document.documentElement.clientWidth;
container.classList.add("animate");
container.classList.add("left")
})
});
</script>
</head>
<body>
<div class="slider">
<div class="slider__arrow slider__left"><</div>
<div class="slider__arrow slider__right">></div>
<div class="slider__container">
<div class="slider__item">1</div>
<div class="slider__item">2</div>
<div class="slider__item">3</div>
<div class="slider__item">4</div>
<div class="slider__item">5</div>
<div class="slider__item">6</div>
<div class="slider__item">7</div>
<div class="slider__item">8</div>
<div class="slider__item">9</div>
</div>
</div>
</body>
</html>
|
все ок!, у тебя тоже опера должна быть, разработчик!
у меня даже мобильный топ, самые проблемные браузеры. ie. и safari, там порой такие чудеса творятся! :cray: |
j0hnik,
:dance: :thanks: |
<html>
<head>
<style>
.carousel{
clear: both;
position: relative;
margin: auto;
border: 1px solid grey;
width: 318px;
height: 106px;
overflow: hidden;
}
.row{
clear: both;
left: -33.3%;
position: relative;
width: 2000px;
overflow: hidden;
}
.item{
position: relative;
float: left;
width: 5%;
height: 100px;
outline: 1px solid grey;
margin: 3px;
transition: transform .3s;
}
.knop{
width: 145px;
height: 30px;
margin: auto;
}
.pusk{
margin: 10px;
border: 1px solid grey;
width: 50px;
height: 20px;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div class="knop">
<div class="pusk left">Left</div>
<div class="pusk right">Right</div>
</div>
<div class="carousel">
<div class="row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
<script>
var i = 0;
var row = document.querySelector('.row');
var item = document.querySelectorAll('.item');
var w = item[0].clientWidth + parseFloat(getComputedStyle(item[0]).marginLeft)*2;
document.querySelector('.right').onclick = function(){
i--;
var first = document.querySelector('.item:first-child');
var last = document.querySelector('.item:last-child');
row.appendChild(first);
[].forEach.call(item, function(el){
el.style.cssText = 'right:'+w*i+'px; transform: translateX('+w*i+'px);';
});
};
document.querySelector('.left').onclick = function(){
i++;
var first = document.querySelector('.item:first-child');
var last = document.querySelector('.item:last-child');
row.insertBefore(last, first);
[].forEach.call(item, function(el){
el.style.cssText = 'right:'+w*i+'px; transform: translateX('+w*i+'px);';
});
};
</script>
</body>
</html>
колдовал колдовал через классы, плавно нифига не получается(если быстро кликать то-же самое что у тебя), в итоге забил и сделал как-то так. |
j0hnik,
:victory: |
| Часовой пояс GMT +3, время: 10:23. |