10.07.2012 22:58:17 Как правильно поступить СЛАЙДЕР одна анимация для двух разных блоков Сообщение #1
karpedon
Освоившийся
Дата регистрации:
10.10.2011 13:19:35
Сообщений: 25
Вот столкнуля с проблемой... не знаю как решить...
НУжно чтобы одна и та же онимация работала в двух разных блоках независимо друг от друга...
какие классы мне поменять а какие оставить??!?!? метод тыка не помагает... ЖС не знаю((((
вот ХТМЛ....
вот собственно КСС...
Вот пропись сего действия которое должно просиходить...
НУжно чтобы одна и та же онимация работала в двух разных блоках независимо друг от друга...
какие классы мне поменять а какие оставить??!?!? метод тыка не помагает... ЖС не знаю((((
вот ХТМЛ....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Демонстрация проскальзывания контента всторону</title>
<link href="slider_content.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="slider_content.js" type="text/javascript"></script>
</head>
<body>
<div class="inslider">
<!-- Контейнер контента -->
<div class="contentholder">
<div class="contentslider">
<div class="content">
<h1>Демонстрация проскальзывания контента всторону. Часть 1</h1>
<p>Просто текст для примера. Просто текст для примера. Просто текст для примера.</p>
</div>
<div class="content">
<h1>Демонстрация проскальзывания контента всторону. Часть 2</h1>
<p>Просто текст для примера. Просто текст для примера. Просто текст для примера.</p>
</div>
<div class="content">
<h1>Демонстрация проскальзывания контента всторону. Часть 3</h1>
<p>Просто текст для примера. Просто текст для примера. Просто текст для примера.</p>
</div>
<div class="content">
<h1>Демонстрация проскальзывания контента всторону. Часть 4</h1>
<p>Просто текст для примера. Просто текст для примера. Просто текст для примера.</p>
</div>
</div>
<!-- Навигация -->
<div class="contentnav">
<a rel="1" href="#">1</a>
<a rel="2" href="#">2</a>
<a rel="3" href="#">3</a>
<a rel="4" href="#">4</a></div>
</div>
</div>
</div>
</body>
</html>
вот собственно КСС...
#slider {
position:relative;
overflow:hidden;
}
.content {
width:700px;
float: left;
position: relative;
background-color:#FFF;
}
.inslider a {
text-decoration:none;
}
.contentholder {
height:300px;
width: 700px;
overflow: hidden;
position: relative;
}
.contentslider {
position: absolute;
top: 0; left: 0;
}
.imgslider img {
float: left;
}
.contentnav {
position: absolute;
bottom: 30px; left:30px;
height:30px;
padding: 1px 2px 2px 2px;
z-index: 100;
text-align: center;
line-height: 30px;
border: 1px solid #3B5998;
}
.contentnav a {
padding: 5px;
text-decoration: none;
color: #333;
}
.contentnav a.active {
font-weight: bold;
color:#FFF;
background: #3B5998;
}
Вот пропись сего действия которое должно просиходить...
$(document).ready(function() {
//Активизируем первую ссылку
$(".contentnav a:first"
.addClass("active";
//Ширина площади одной страницы
var contentwidth = $(".contentholder".width();
//Обще количество страниц
var totalcontent = $(".content".size();
//Общая ширина всего контента (всех страниц)
var allcontentwidth = contentwidth * totalcontent;
//Проскальзывание контента устанавливаем на ширину, которую получили выше
$(".contentslider".css({'width' : allcontentwidth});
//Теперь пишем новую функцию для проскальзывания и навигации
rotate = function(){
//Количество раз, на которое надо прокрутить контент
var slideid = $active.attr("rel" - 1;
//Устанавливаем дистанцию, на которую происходит единичная прокрутка
var slidedistance = slideid * contentwidth;
//Удаляем активный класс
$(".contentnav a".removeClass('active');
//Добавляем активный класс
$active.addClass('active');
//Анимация проскальзывания
$(".contentslider".animate({
left: -slidedistance
}, 500 );
};
//Устанавливаем время для проведения проскальзывания
rotation = function(){
play = setInterval(function(){
//Навигация следующего слайда
$active = $('.contentnav a.active').next();
if ( $active.length === 0) {
//Перемещаемся к первому слайду в навигации
$active = $('.contentnav a:first');
}
rotate();
//Таймер устанавливаем на 5 сек
}, 20000);
};
//Запускаем функцию вращения
rotation();
$(".contentnav a".click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});
