Показать сообщение отдельно
  #1 (permalink)  
Старый 25.07.2010, 00:23
Интересующийся
Отправить личное сообщение для Kostyn4ick Посмотреть профиль Найти все сообщения от Kostyn4ick
 
Регистрация: 25.07.2010
Сообщений: 11

Разместить 2 одинаковых скрипта на 1 странице
Здравствуйте, возникла такая надобность разместить 2 одинаковых скрипта на 1 странице. С этим скриптом был файл custom:
$(document).ready(function() {
//Активизируем первую ссылку
$(".contentnav2 a:first").addClass("active2");
//Ширина площади одной страницы
var contentwidth2 = $(".contentholder2").width();
//Обще количество страниц
var totalcontent2 = $(".content2").size();
//Общая ширина всего контента (всех страниц)
var allcontentwidth2 = contentwidth2 * totalcontent2;
//Проскальзывание контента устанавливаем на ширину, которую получили выше
$(".contentslider2").css({'width' : allcontentwidth2});
//Теперь пишем новую функцию для проскальзывания и навигации
rotate = function(){
//Количество раз, на которое надо прокрутить контент
var slideid2 = $active2.attr("rel") - 1;
//Устанавливаем дистанцию, на которую происходит единичная прокрутка
var slidedistance2 = slideid2 * contentwidth2;
//Удаляем активный класс
$(".contentnav2 a").removeClass('active2');
//Добавляем активный класс
$active2.addClass('active2');
//Анимация проскальзывания
$(".contentslider2").animate({
        left: -slidedistance2
    }, 500 );
}; 
 
//Устанавливаем время для проведения проскальзывания
rotation = function(){
play = setInterval(function(){
//Навигация следующего слайда
$active2 = $('.contentnav2 a.active2').next();
if ( $active2.length === 0) {
//Перемещаемся к первому слайду в навигации
$active2 = $('.contentnav2 a:first');
}
rotate();
//Таймер устанавливаем на 5 сек
}, 6000);
};
//Запускаем функцию вращения
rotation();
$(".contentnav2 a").click(function() {
$active2 = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});


и файл со стилями style.css:
Код:
#wrapper {
	width:225px;
	overflow:visible;
}

#slider {
	position:relative;
	padding:0px;
	overflow:hidden;

}
.content1 {
	width:220px;
	padding:0px;
	margin-left:4px;
	margin-right:1px;
	top:65px;
	float: left;
	position: relative;
}
.inslider a {
	text-decoration:none;
}
.contentholder {
	height:324px;
	width: 225px;
	overflow: hidden;
	position: relative;
}
.contentslider {
	position: absolute;
	top: 0; left: 0;
}
.imgslider img {
	float: left;
}
.contentnav {
	position: absolute;
	bottom: 0px; left:0px;
	 height:30px;
	z-index: 100;
	text-align: center;
	line-height: 30px;
	border: 1px solid #000;
	border: 1px solid #000;
	padding:0px;
}
.contentnav a {
	padding: 5px;
	margin-left:0px;
	text-decoration: none;
	color: #7c7c7e;
}
.contentnav a.active {
	font-weight: bold;
	color:#FFF;
	background: #603;
}
Для решения этой проблемы я создал второй файд custom2.js и style2.css

В стилях поменял название каждого класса.
Да, и на странице пишу что-то такого плана:
Код:
<div style="width:225px; height:324px">
       <script src="custom2.js" type="text/javascript"></script>
<div id="wrapper2">
<div id="slider2">
<div class="inslider2">
    <!-- Контейнер контента  -->
<div class="contentholder2">
<div class="contentslider2">

<div class="content2">
<h1>Заголовок</h1>
<p>Текст</p>
</div>


<div class="content2">
<h1>Заголовок</h1>
<p>Текст</p>
</div>



<div class="content2">
<h1>Заголовок</h1>
<p>Текст</p>
</div>



<div class="content2">
<h1>Заголовок</h1>
<p>Текст</p>
</div>

</div>
</div>
<div class="contentnav2">
      <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>
</div>
(это был вызов для второго скрипта)
первый вызываю так же, только двоички убираю...

По отдельности все работает замечательно, как только я их объеденяю, работает только последний.
Как быть?

Да, и на заметку, знания Явы отвратителные, но с программированием дружу( C++, C#)

Я изменил файл со второй функцией, переименовал в нем глобальную переменную, ошибка осталась та же.
Теперь он имеет следующий вид:
$(document).ready(function fnc() {
//Активизируем первую ссылку
$(".contentnav2 a:first").addClass("active2");
//Ширина площади одной страницы
var contentwidth2 = $(".contentholder2").width();
//Обще количество страниц
var totalcontent2 = $(".content2").size();
//Общая ширина всего контента (всех страниц)
var allcontentwidth2 = contentwidth2 * totalcontent2;
//Проскальзывание контента устанавливаем на ширину, которую получили выше
$(".contentslider2").css({'width' : allcontentwidth2});
//Теперь пишем новую функцию для проскальзывания и навигации
rotate = function fnc(){
//Количество раз, на которое надо прокрутить контент
var slideid2 = $active2.attr("rel") - 1;
//Устанавливаем дистанцию, на которую происходит единичная прокрутка
var slidedistance2 = slideid2 * contentwidth2;
//Удаляем активный класс
$(".contentnav2 a").removeClass('active2');
//Добавляем активный класс
$active2.addClass('active2');
//Анимация проскальзывания
$(".contentslider2").animate({
        left: -slidedistance2
    }, 500 );
}; 
 
//Устанавливаем время для проведения проскальзывания
rotation = function fnc(){
play = setInterval(function fnc(){
//Навигация следующего слайда
$active2 = $('.contentnav2 a.active2').next();
if ( $active2.length === 0) {
//Перемещаемся к первому слайду в навигации
$active2 = $('.contentnav2 a:first');
}
rotate();
//Таймер устанавливаем на 5 сек
}, 6000);
};
//Запускаем функцию вращения
rotation();
$(".contentnav2 a").click(function fnc() {
$active2 = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});

Последний раз редактировалось Kostyn4ick, 25.07.2010 в 15:36.
Ответить с цитированием