Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Анимация слайдера. (https://javascript.ru/forum/jquery/54774-animaciya-slajjdera.html)

Babyslam 31.03.2015 16:21

Анимация слайдера.
 
Добрый день. Нужно сделать : При клике вперед старый слайд уходит влево, а новый выезжает справа (как будто выталкивая старый слайд). Не могу реализовать одновременную анимацию.
$(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/ готовый макет

рони 31.03.2015 19:12

Babyslam,
сделайте рабочий макет

Babyslam 31.03.2015 19:53

Цитата:

Сообщение от рони (Сообщение 364218)
Babyslam,
сделайте рабочий макет

http://hostingfortraineeship.esy.es/java4/

рони 31.03.2015 22:17

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>

Babyslam 01.04.2015 00:41

рони
Огромное спасибо!

рони 14.04.2015 13:32

Вариант 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>

рони 14.04.2015 13:39

Простой слайдер
 
Вариант 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>

Babyslam 22.04.2015 12:18

Добрый день,решил соединить все эффекты чтобы их можно было переключать кнопками. При переключении с 1 эффекта на 3,картинки просто исчезают.
http://jsfiddle.net/341rqhxr/7/

рони 22.04.2015 12:48

Простой слайдер вариант мах
 
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>

Babyslam 28.04.2015 17:39

Нужно весь код сделать как объект с его свойствами и методами.
В таком принципе все делается ?
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, время: 23:51.