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

Тема в разделе "JavaScript", создана пользователем студент, 26 май 2013.

Модераторы: ZiX
  1. студент

    студент

    Регистр.:
    3 фев 2009
    Сообщения:
    157
    Симпатии:
    1
    Есть слайдер новостей выводящий нужное количество (у меня 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;
    });
    });

    });

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

    [​IMG]

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

    Waki Постоялец

    Регистр.:
    14 ноя 2012
    Сообщения:
    64
    Симпатии:
    21
    выложи хтмл+стили, или ссылку на сайт дай
     
  3. студент

    студент

    Регистр.:
    3 фев 2009
    Сообщения:
    157
    Симпатии:
    1
    скачать
    прошу Вас написать тут какие изменения Вы сделаете, чтобы я мог сделать их на сайте.
     
  4. Waki

    Waki Постоялец

    Регистр.:
    14 ноя 2012
    Сообщения:
    64
    Симпатии:
    21
    Если структура именно такая как в этом архиве, то предлагаю сделать так, может и не совсем правильно, но другого придумать не смог.
    в файле "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. студент

    студент

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

    Waki Постоялец

    Регистр.:
    14 ноя 2012
    Сообщения:
    64
    Симпатии:
    21
    студент,
    есть ли возможность обновить jquery на сайте?
     
  7. qsceszwadx

    qsceszwadx Писатель

    Регистр.:
    25 май 2013
    Сообщения:
    8
    Симпатии:
    0
  8. студент

    студент

    Регистр.:
    3 фев 2009
    Сообщения:
    157
    Симпатии:
    1
    jquery наверное можно обновить, но слайдер мне нужен именно мой, так как я его использую на нескольких сайтах и в нескольких вариантах. Мне всего лишь нужно чтобы активная часть (пункт) выделялась. Я не могу использовать новый слайдер так как мой слайдер программисты интегрировали с сайтом.
     
  9. Waki

    Waki Постоялец

    Регистр.:
    14 ноя 2012
    Сообщения:
    64
    Симпатии:
    21
    студент, такой вот еще вариант
    вначале файле,
    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();
    });