Здравствуйте, возникла такая надобность разместить 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;
});
});
