Анимация слайдера.
Добрый день. Нужно сделать : При клике вперед старый слайд уходит влево, а новый выезжает справа (как будто выталкивая старый слайд). Не могу реализовать одновременную анимацию.
$(function () {
var elWrap = $('#slider'),
el = elWrap.find('img'),
indexImg = 1,
indexMax = el.length,
phase = 2000;
function change () {
el.animate({"left": "-=700px"}, {queue: false});
el.fadeOut();
el.filter(':nth-child('+indexImg+')').fadeIn( function() {
el.animate({"left": "+=700px"});
});
elWrap.append('<span class="next"></span><span class="prev"></span>');
var btnNext = $('span.next'),
btnPrev = $('span.prev');
btnNext.click(function() {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change ();
});
btnPrev.click(function() {
indexImg--;
if(indexImg < 1) {
indexImg = indexMax;
}
change ();
});
});
<div id="slider" class="slider_wrap"> <img src="slider_image1.jpg" alt="" /> <img src="slider_image2.jpg" alt="" /> <img src="slider_image3.jpg" alt="" /> </div> http://hostingfortraineeship.esy.es/java4/ готовый макет |
Babyslam,
сделайте рабочий макет |
Цитата:
|
Babyslam,
1 вариант <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Java 4</title>
<style type="text/css">
/*start reset*/
body, div, dl, dt,dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, hr, td {
margin:0; padding:0;
}
table {
border-collapse:collapse; border-spacing:0;
}
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal; font-weight:normal;
}
ol, ul {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%; font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronum {
border:0;
}
/*end reset*/
html, body {
height:100%;
font:normal 12px/18px Arial, san-serif;
}
.slider_wrap {
margin:100px auto 0;
width:680px;
height:400px;
position:relative;
overflow:hidden;
}
.slider_wrap img {
opacity: 0;
width:640px;
height:auto;
display:block;
position:absolute;
top:0;
left:-640px;
}
.slider_wrap img:first-child {
left: 20px;
opacity: 1;
}
.slider_wrap span {
margin-top:-13px;
width:15px;
height:26px;
display:block;
position:absolute;
top:50%;
cursor:pointer;
background:url(http://hostingfortraineeship.esy.es/java4/slider2_arrow.png) no-repeat;
}
.slider_wrap span.next {
right:0;
background-position:-15px 0;
}
.slider_wrap span.next:hover {
background-position:-15px -26px;
}
.slider_wrap span.prev {
left:0;
background-position: 0 0;
}
.slider_wrap span.prev:hover {
background-position: 0 -26px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>$(function () {
var elWrap = $('#slider'),
el = elWrap.find('img'),
indexImg = 1,
indexMax = el.length,
phase = 2000,
timer;
function change(v) {
el.stop(true,true);
var next = el.eq(indexImg-1);
el.not(next).animate({"left": v ? -640 : 640 ,opacity: 0},800);
next.css({left: v ? 620 : -620}).animate({"left": 20, opacity: 1}, 800)
}
function autoCange () {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change();
timer = window.setTimeout(autoCange, phase);
}
elWrap.append('<span class="next"></span><span class="prev"></span>');
var btnNext = $('span.next'),
btnPrev = $('span.prev');
btnNext.click(function() {
window.clearTimeout(timer)
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change (true);
});
btnPrev.click(function() {
window.clearTimeout(timer)
indexImg--;
if(indexImg < 1) {
indexImg = indexMax;
}
change();
});
autoCange()
});
</script>
</head>
<body>
<div id="slider" class="slider_wrap">
<img src="https://unsplash.it/600/1067?image=1001" alt="" />
<img src="https://unsplash.it/600/1067?image=1003" alt="" />
<img src="https://unsplash.it/600/1067?image=1002" alt="" />
</div>
</body>
</html>
2 вариант изменено 2 символа <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Java 4</title>
<style type="text/css">
/*start reset*/
body, div, dl, dt,dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, hr, td {
margin:0; padding:0;
}
table {
border-collapse:collapse; border-spacing:0;
}
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal; font-weight:normal;
}
ol, ul {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%; font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronum {
border:0;
}
/*end reset*/
html, body {
height:100%;
font:normal 12px/18px Arial, san-serif;
}
.slider_wrap {
margin:100px auto 0;
width:680px;
height:400px;
position:relative;
overflow:hidden;
}
.slider_wrap img {
opacity: 0;
width:640px;
height:auto;
display:block;
position:absolute;
top:0;
left:-640px;
}
.slider_wrap img:first-child {
left: 20px;
opacity: 1;
}
.slider_wrap span {
margin-top:-13px;
width:15px;
height:26px;
display:block;
position:absolute;
top:50%;
cursor:pointer;
background:url(http://hostingfortraineeship.esy.es/java4/slider2_arrow.png) no-repeat;
}
.slider_wrap span.next {
right:0;
background-position:-15px 0;
}
.slider_wrap span.next:hover {
background-position:-15px -26px;
}
.slider_wrap span.prev {
left:0;
background-position: 0 0;
}
.slider_wrap span.prev:hover {
background-position: 0 -26px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>$(function () {
var elWrap = $('#slider'),
el = elWrap.find('img'),
indexImg = 1,
indexMax = el.length,
phase = 2000,
timer;
function change(v) {
el.stop(true,true);
var next = el.eq(indexImg-1);
el.not(next).animate({"left": v ? -640 : 640 ,opacity: 0},800);
next.css({left: v ? -620 : 620}).animate({"left": 20, opacity: 1}, 800)
}
function autoCange () {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change(true);
timer = window.setTimeout(autoCange, phase);
}
elWrap.append('<span class="next"></span><span class="prev"></span>');
var btnNext = $('span.next'),
btnPrev = $('span.prev');
btnNext.click(function() {
window.clearTimeout(timer)
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change (true);
});
btnPrev.click(function() {
window.clearTimeout(timer)
indexImg--;
if(indexImg < 1) {
indexImg = indexMax;
}
change();
});
autoCange()
});
</script>
</head>
<body>
<div id="slider" class="slider_wrap">
<img src="https://unsplash.it/600/1067?image=1002" alt="" />
<img src="https://unsplash.it/600/1067?image=1001" alt="" />
<img src="https://unsplash.it/600/1067?image=1003" alt="" />
</div>
</body>
</html>
|
рони
Огромное спасибо! |
Вариант 3
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Java 4</title>
<style type="text/css">
/*start reset*/
body, div, dl, dt,dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, hr, td {
margin:0; padding:0;
}
table {
border-collapse:collapse; border-spacing:0;
}
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal; font-weight:normal;
}
ol, ul {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%; font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronum {
border:0;
}
/*end reset*/
html, body {
height:100%;
font:normal 12px/18px Arial, san-serif;
}
.slider_wrap {
margin:100px auto 0;
width:680px;
height:400px;
position:relative;
overflow:hidden;
}
.slider_wrap img {
opacity: 0;
width:640px;
height:auto;
display:block;
position:absolute;
top:0;
left:-640px;
}
.slider_wrap img {
left: 20px;
opacity: 1;
}
.slider_wrap span {
margin-top:-13px;
width:15px;
height:26px;
display:block;
position:absolute;
top:50%;
cursor:pointer;
background:url(http://hostingfortraineeship.esy.es/java4/slider2_arrow.png) no-repeat;
}
.slider_wrap span.next {
right:0;
background-position:-15px 0;
}
.slider_wrap span.next:hover {
background-position:-15px -26px;
}
.slider_wrap span.prev {
left:0;
background-position: 0 0;
}
.slider_wrap span.prev:hover {
background-position: 0 -26px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>$(function () {
var elWrap = $('#slider'),
el = elWrap.find('img'),
indexMax = el.length,
indexImg = el.length,
phase = 2000,
timer;
function change(v) {
el.stop(true,true);
var next = el.eq(indexImg-1);
next.appendTo(elWrap).css({left: v ? 620 : -620}).animate({"left": 20}, 800)
}
function autoCange () {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change(true);
timer = window.setTimeout(autoCange, phase);
}
elWrap.append('<span class="next"></span><span class="prev"></span>');
var btnNext = $('span.next'),
btnPrev = $('span.prev');
btnNext.click(function() {
window.clearTimeout(timer)
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change (true);
});
btnPrev.click(function() {
window.clearTimeout(timer)
indexImg --;
if(indexImg < 1) {
indexImg = indexMax;
}
change();
});
autoCange()
});
</script>
</head>
<body>
<div id="slider" class="slider_wrap">
<img src="https://unsplash.it/600/1067?image=1002" alt="1" />
<img src="https://unsplash.it/600/1067?image=1003" alt="2" />
<img src="https://unsplash.it/600/1067?image=1001" alt="3" />
</div>
</body>
</html>
|
Простой слайдер
Вариант 4
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Java 4</title>
<style type="text/css">
/*start reset*/
body, div, dl, dt,dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, hr, td {
margin:0; padding:0;
}
table {
border-collapse:collapse; border-spacing:0;
}
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal; font-weight:normal;
}
ol, ul {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%; font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronum {
border:0;
}
/*end reset*/
html, body {
height:100%;
font:normal 12px/18px Arial, san-serif;
}
.slider_wrap {
margin:100px auto 0;
width:680px;
height:400px;
position:relative;
overflow:hidden;
}
.slider_wrap img {
opacity: 0;
width:640px;
height:auto;
display:block;
position:absolute;
top:0;
left:-640px;
}
.slider_wrap img {
left: 20px;
opacity: 1;
}
.slider_wrap span {
margin-top:-13px;
width:15px;
height:26px;
display:block;
position:absolute;
top:50%;
cursor:pointer;
background:url(http://hostingfortraineeship.esy.es/java4/slider2_arrow.png) no-repeat;
}
.slider_wrap span.next {
right:0;
background-position:-15px 0;
}
.slider_wrap span.next:hover {
background-position:-15px -26px;
}
.slider_wrap span.prev {
left:0;
background-position: 0 0;
}
.slider_wrap span.prev:hover {
background-position: 0 -26px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>$(function () {
var elWrap = $('#slider'),
el = elWrap.find('img'),
indexMax = el.length,
indexImg = el.length,
phase = 2000,
timer;
function change(v) {
el.stop(true,true);
var next = el.eq(indexImg-1);
el.not(next.animate({opacity: 1}, 800)).animate({opacity: 0},800);
}
function autoCange () {
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change(true);
timer = window.setTimeout(autoCange, phase);
}
elWrap.append('<span class="next"></span><span class="prev"></span>');
var btnNext = $('span.next'),
btnPrev = $('span.prev');
btnNext.click(function() {
window.clearTimeout(timer)
indexImg++;
if(indexImg > indexMax) {
indexImg = 1;
}
change (true);
});
btnPrev.click(function() {
window.clearTimeout(timer)
indexImg --;
if(indexImg < 1) {
indexImg = indexMax;
}
change();
});
autoCange()
});
</script>
</head>
<body>
<div id="slider" class="slider_wrap">
<img src="https://unsplash.it/600/1067?image=1002" alt="1" />
<img src="https://unsplash.it/600/1067?image=1001" alt="2" />
<img src="https://unsplash.it/600/1067?image=1003" alt="3" />
</div>
</body>
</html>
|
Добрый день,решил соединить все эффекты чтобы их можно было переключать кнопками. При переключении с 1 эффекта на 3,картинки просто исчезают.
http://jsfiddle.net/341rqhxr/7/ |
Простой слайдер вариант мах
Babyslam,
не учли css <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<style type='text/css'>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,hr,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img,abbr,acronum{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
html,body{height:100%;font:normal 12px/18px Arial,san-serif}
.slider_wrap{margin:100px auto 0;width:680px;height:400px;position:relative;overflow:hidden}
.slider_wrap img{opacity:0;width:640px;height:auto;display:block;position:absolute;top:0;left:-640px}
.slider_wrap img:first-child{left:20px;opacity:1}
.slider_wrap span{margin-top:-13px;width:15px;height:26px;display:block;position:absolute;top:50%;cursor:pointer;background:url(http://hostingfortraineeship.esy.es/Java4/slider2_arrow.png) no-repeat}
.slider_wrap span.next{right:0;background-position:-15px 0}
.slider_wrap span.next:hover{background-position:-15px -26px}
.slider_wrap span.prev{left:0;background-position:0 0}
.slider_wrap span.prev:hover{background-position:0 -26px}
</style>
<script>
$(window).load(function() {
$(function() {
var elWrap = $('#slider'),
el = elWrap.find('img'),
indexImg = 1,
indexMax = el.length,
phase = 2000,
timer;
var radios = $('[name="rad"]');
function change(v) {
if (radios[0].checked == true) {
el.stop(true, true);
var next = el.eq(indexImg - 1);
el.not(next).animate({
"left": v ? -680 : 680,
opacity: 1
}, 800);
next.css({
left: v ? 620 : -620
}).animate({
"left": 20,
opacity: 1
}, 800)
} else if (radios[1].checked == true) {
el.stop(true, true).css({
opacity: 1
});
var next = el.eq(indexImg - 1);
next.appendTo(elWrap).css({
left: v ? 620 : -620
}).animate({
"left": 20
}, 800)
} else {
el.stop(true, true).css({
"left": 20
});
var next = el.eq(indexImg - 1);
el.not(next.animate({
opacity: 1
}, 800)).animate({
opacity: 0
}, 800);
}
}
elWrap.append('<span class="next"></span><span class="prev"></span>');
var btnNext = $('span.next'),
btnPrev = $('span.prev');
btnNext.click(function() {
window.clearTimeout(timer)
indexImg++;
if (indexImg == indexMax) {
btnNext.hide();
}
btnPrev.show();
change(true);
});
btnPrev.click(function() {
window.clearTimeout(timer)
indexImg--;
if (indexImg == 1) {
btnPrev.hide()
}
change();
btnNext.show();
}).hide();
});
});
</script>
</head>
<body>
<div id="slider" class="slider_wrap">
<img src="http://hostingfortraineeship.esy.es/Java4/slider_image2.jpg" alt="2" />
<img src="http://hostingfortraineeship.esy.es/Java4/slider_image3.jpg" alt="3" />
<img src="http://hostingfortraineeship.esy.es/Java4/slider_image1.jpg" alt="3" />
</div>
<ul>
<li>
<input type="radio" class="example" name="rad">
</li>
<li>
<input type="radio" class="example" name="rad">
</li>
<li>
<input type="radio" class="example" name="rad">
</li>
</ul>
</body>
</html>
|
Нужно весь код сделать как объект с его свойствами и методами.
В таком принципе все делается ? var Slider = {
elWrap : $('#slider'),
el : elWrap.find('img'),
indexImg : 1,
indexMax : el.length,
phase : 2000,
radios : $('#rad');
change() : = function(){
if (document.getElementsByName('rad')[0].checked == true)
{
var next = el.eq(indexImg-1);
el.not(next).animate({"left": v ? -640 : 640 ,opacity: 1},800);
next.css({left: v ? 620 : -620}).animate({"left": 20, opacity: 1}, 800)
}
else if(document.getElementsByName('rad')[1].checked == true)
{
el.stop(true,true);
var next = el.eq(indexImg-1);
next.appendTo(elWrap).css({left: v ? 620 : -620}).animate({"left": 20}, 800)
}
else
{
el.stop(true,true);
var next = el.eq(indexImg-1);
el.not(next.animate({opacity: 1}, 800)).animate({opacity: 0},800);
}
}
}
|
| Часовой пояс GMT +3, время: 16:19. |