Изменение цвета фона номера активного слайда

[студент]

Есть слайдер новостей выводящий нужное количество (у меня 10), а под ним номера слайдов (от 1 до 10). Если навести мышку на любой номер, то его фон меняет цвет и в слайдере появляется нужная картинка. Слайдер автоматически прокручивает эти 10 картинок. Нужно чтобы и номера под слайдером также прокручивались вместе с картинками (т.е. если в слайдере показывается вторая картинка, то под ней должен высвечиваться номер 2). Привожу ява код:

Спойлер

$(document).ready(function(){

var opacity = 0.5;
var opacityTime = 200;
var slideTime = 500;
var widthSlide = $('div.block-slider').width();
var now = 0;
var length = $('div.block-slider').length;

function ScrollSlider() {
Timer = setInterval("$('.next').click()", 15000);
};

ScrollSlider();

$('div.sub-slide').css({opacity: opacity});
$('.link-slider').click(function() { this.target = '_blank'; });

$('.next').click( function() {
var curimg = $('div.block-slider:first-child');
curimg.animate({marginLeft: - widthSlide}, slideTime, function(){
$('div.list-slider').remove('.block-slider:first-child');
curimg.appendTo('div.list-slider').animate({marginLeft: 0 });
});
if (now == length - 1) {now = 0;} else {now = now + 1;};
return false
});

$('.back').click( function() {
var curimg = $('div.block-slider:last-child');
$('div.list-slider').remove('.block-slider:last-child');
curimg.prependTo('div.list-slider').css({marginLeft: - widthSlide}).animate({marginLeft: 0}, slideTime);
if (now <= 0) { now = length + now - 1 } else { now = now - 1; }
return false
});

$('.slider_numbers a').hover( function() {
clearInterval(Timer);

var positionElement = $(this).attr('id');
var curimg = $('#' + positionElement + '-slide');

if ( positionElement != now) {
$('div.list-slider').remove('#' + positionElement + '-slide');
curimg.prependTo('div.list-slider').css({marginLeft: - widthSlide}).animate({marginLeft: 0}, slideTime);
now = positionElement*1;
}
}, function() {
ScrollSlider();
});

$('div.block-slider').hover( function() {
$('div.sub-slide').animate({opacity: 0.8}, opacityTime);
}, function() {
$('div.sub-slide').animate({opacity: opacity}, opacityTime);
});

$('div.block-slider, .back, .next').hover( function() {
clearInterval(Timer);
}, function() {
ScrollSlider();
});

$('div.block-slider').each( function() {
var link = $('.link-slider', this).attr('href');
$('.info-slide', this).click( function() {
location.href = link;
});
});

});

Заранее благодарю

никто не знает или нужны и другие файлы слайдера?

 

[Waki]

никто не знает или нужны и другие файлы слайдера?

выложи хтмл+стили, или ссылку на сайт дай

 

[студент]

выложи хтмл+стили, или ссылку на сайт дай

Для просмотра ссылки Войди или Зарегистрируйся
прошу Вас написать тут какие изменения Вы сделаете, чтобы я мог сделать их на сайте.

 

[Waki]

Если структура именно такая как в этом архиве, то предлагаю сделать так, может и не совсем правильно, но другого придумать не смог.
в файле "news_slider.js" заменить
$('.next').click( function() {
...
});
на это

$('.next').click( function() {
var curimg = $('div.block-slider:first-child');
var _id = $(this).attr("id").replace(/[^0-9]/g, '');
curimg.animate({marginLeft: - widthSlide}, slideTime, function(){
$('div.list-slider').remove('.block-slider:first-child');
curimg.appendTo('div.list-slider').animate({marginLeft: 0 });
});
$('.slider_numbers li a').removeClass("active");
if (now == length - 1) { now = 0; } else { now = now + 1; }
$('.slider_numbers li a#'+(now+1)).toggleClass("active");
return false
});

Найти
$('.slider_numbers a').hover( function() {
...
});
заменить на

$('.slider_numbers a').hover( function() {
clearInterval(Timer);
$('.slider_numbers li a').removeClass("active");
var positionElement = $(this).attr('id');
var curimg = $('#' + positionElement + '-slide');
$(this).toggleClass("active");
if ( positionElement != now) {
$('div.list-slider').remove('#' + positionElement + '-slide');
curimg.prependTo('div.list-slider').css({marginLeft: - widthSlide}).animate({marginLeft: 0}, slideTime);
now = positionElement*1;
}
}, function() {
ScrollSlider();
});

Найти
function ScrollSlider() {
Timer = setInterval("$('.next').click()", 5000);
};
ScrollSlider();
Добавить ниже

$('.slider_numbers li a#1').toggleClass("active");

добавить в стили:

.slider_numbers li a.active {
background: #999;
padding: 5px;
}

 

[студент]

Если структура именно такая как в этом архиве, то предлагаю сделать так, может и не совсем правильно, но другого придумать не смог.

Спасибо Вам. Все прекрасно, но есть один маленький глюк. Картинки в слайдере меняются и вместе с ним меняется и фон активного номера. Дойдя до последнего пункта он начинается заново (так должно быть!). Но! Если навести курсор на последний (у меня их 5) пункт (номер) и далее убрать ее с нее, то изменяющийся фон дойдя до этого (последнего) пункта (номера) перестает работать (т.е. не переходит на первый). Сам слайдер тоже некорректно работает, он меняет картинки хаотично переходя сначала от пятой на третью картинку, потом на четвертую, потом на вторую и далее на первую (5, 3, 4, 2, 1), тоесть работает хаотично и в обратном режиме.
А если навести курсор на любой другой номер, то активный фон пунктов работает, но в слайдере показывает другую картинку и также хаотично.
Проверил и на Вашем сайте примере.

 

[Waki]

студент,
есть ли возможность обновить jquery на сайте?

 

[qsceszwadx]

Для просмотра ссылки Войди или Зарегистрируйся

 

[студент]

студент,
есть ли возможность обновить jquery на сайте?

jquery наверное можно обновить, но слайдер мне нужен именно мой, так как я его использую на нескольких сайтах и в нескольких вариантах. Мне всего лишь нужно чтобы активная часть (пункт) выделялась. Я не могу использовать новый слайдер так как мой слайдер программисты интегрировали с сайтом.

 

[Waki]

студент, такой вот еще вариант

Спойлер

вначале файле,
var now = 0; замени на var now = 1;

$('.next').click( function() {
var curimg = $('div.block-slider:first-child');
curimg.animate({marginLeft: - widthSlide}, slideTime, function(){
$('div.list-slider').remove('.block-slider:first-child');
curimg.appendTo('div.list-slider').animate({marginLeft: 0 });
});
if (now == length) {now = 1;} else {now = now + 1;};
$('.slider_numbers li a').removeClass("active");
$('.slider_numbers li a#'+now).toggleClass("active");
return false
});

$('.slider_numbers a').hover( function() {
clearInterval(Timer);
 
var positionElement = $(this).attr('id');
var curimg = $('#' + positionElement + '-slide');
 
if ( positionElement != now) {
$('div.list-slider').remove('#' + positionElement + '-slide');
curimg.prependTo('div.list-slider').css({marginLeft: - widthSlide}).animate({marginLeft: 0}, slideTime);
now = positionElement*1;
$('.slider_numbers li a').removeClass("active");
$('.slider_numbers li a#'+now).toggleClass("active");
}
}, function() {
ScrollSlider();
});