Показать сообщение отдельно
  #7 (permalink)  
Старый 14.04.2015, 14:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,139

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

Последний раз редактировалось рони, 13.02.2016 в 14:13.
Ответить с цитированием