Показать сообщение отдельно
  #2 (permalink)  
Старый 13.10.2013, 22:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Webkraft,
вариант ...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<a href="" id="sliderLink" target="_self">Slider link</a>
	<div class="timerslide" style="position: relative; width:400px; height:150px;">
    	<div style="background-color:red; width:400px; height:150px; position:absolute" class="slid1" data-time="5" data-url="http://www.com" data-target="_self">
        </div>
        <div style="background-color:green; width:400px; height:150px;  position:absolute" class="slid1" data-time="10" data-url="http://www.com" data-target="_self">
        </div>
        <div style="background-color:grey; width:400px; height:150px;  position:absolute" class="slid1" data-time="20" data-url="http://www.com" data-target="_self">
        </div>
	</div>

<script>
function timerSlider() {
	var timerSlid = $('div', '.timerslide'),
	changeTime,
	targetImg,
	next = timerSlid.size()-1;
    timerSlid.css('opacity', 0);
	function changeSlide() {
        timerSlid.eq(next).animate({'opacity': 0}, 1000);
        next = ++next%timerSlid.size();
        targetImg = timerSlid.eq(next);
        targetImg.animate({'opacity': 1}, 1000);
		changeTime = targetImg.data('time') * 1000;
        $('#sliderLink').attr({'href': targetImg.data('url'), 'target':targetImg.data('target')});
		setTimeout(function() {
			 changeSlide();
			}, changeTime);
	}

	changeSlide();
}
timerSlider()
</script>
</body>
</html>
Ответить с цитированием