<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 2.0

PHP и MySQL с Нуля до Гуру 2.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 11 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

В курсе Вы узнаете всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Почти к каждому уроку идут упражнения.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Как правильно поступить СЛАЙДЕР одна анимация для двух разных блоков
10.07.2012 22:58:17 Как правильно поступить СЛАЙДЕР одна анимация для двух разных блоков Сообщение #1
karpedon

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;
});
});


Профиль Ответить
10.07.2012 22:59:27 Как правильно поступить СЛАЙДЕР одна анимация для двух разных блоков Сообщение #2
karpedon

karpedon

Освоившийся

Освоившийся

Дата регистрации:
10.10.2011 13:19:35

Сообщений: 25

Второй блок пока не вставлял.. что бы меньше объёма было)))
Профиль Ответить
10.07.2012 23:29:37 Как правильно поступить СЛАЙДЕР одна анимация для двух разных блоков Сообщение #3
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Изучайте JS, разбираться в чужом коде у меня нет ни малейшего желания. Именно по этой причине я всегда пишу всё сам за самым-самым редким исключением. И Вам рекомендую поступать так же.
Профиль Ответить
11.07.2012 00:29:15 Как правильно поступить СЛАЙДЕР одна анимация для двух разных блоков Сообщение #4
karpedon

karpedon

Освоившийся

Освоившийся

Дата регистрации:
10.10.2011 13:19:35

Сообщений: 25

Понятное дело что надо... а когда горят "трубы"... и нет времени уделять самообучению что делать??? вот и надеялся на помощь профессионала... спасибо за консультацию...
Профиль Ответить
11.07.2012 01:30:59 Как правильно поступить СЛАЙДЕР одна анимация для двух разных блоков Сообщение #5
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

На самообучение достаточно 1-го часа в день. Я не знаю ни одного человека, который не в состоянии уделить столько времени. Зато знаю сотни людей, которые ищут причины, лишь бы только ничего не делать, а надеяться, что кто-то другой будет за Вас что-то делать. Такого не бывает.
Профиль Ответить