Заставить слайдер jQuery работать с разделами вместо изображений

#javascript #jquery #html #image #slideshow

#javascript #jquery #HTML #изображение #слайд-шоу

Вопрос:

Я работаю над этой страницей веб-сайтаpoochclub.com и я пытаюсь сделать все это текстом вместо изображений. Проблема в том, что я хочу работать на панелях ниже со всей информацией, содержащейся в файле js (называемом about.js) настроен на работу с изображениями вместо этого в разделах, куда я потенциально мог бы добавить текст. Я не очень хорош в написании javascript, и мне нужна помощь, чтобы исправить исходный файл, который выглядит следующим образом:

 <script type="text/javascript>        
(function ($) {
         var pages, panels, arrows, currentClass = 'current', 
          currentIndex = 0, currentSize = 0;

    function showPage() {
        var ctx = jQuery.trim(this.className.replace(/current/gi, ''));
        $(this).addClass(currentClass).siblings().removeClass(currentClass);

        $('.panel')
            .removeClass(currentClass)
            .find('img')
                .removeClass(currentClass)
                .removeAttr('style')
            .end();

        panels.find('.'   ctx)          
            .addClass(currentClass)
            .find('img')    
                .removeClass(currentClass)
                .removeAttr('style')    
                .eq(0)
                    .fadeIn()
                    .addClass(currentClass)
            .end()      

        currentIndex = 0;
        currentSize = panels.find('.'   ctx   ' img').length;
        return false;
    }

    function showArrows(e) {
        arrows['fade'   (e.type === 'mouseenter' ? 'In' : 'Out')]();
    }

    function getPrev() {
        currentIndex = currentIndex - 1 < 0 ? currentSize - 1 : currentIndex - 1;
        return currentIndex;
    }

    function doPrev() {
        var ctx = panels.find('div.current img');
        ctx.removeClass(currentClass).removeAttr('style');
        ctx.eq(getPrev()).fadeIn().addClass(currentClass);
    }

    function getNext() {
        currentIndex = currentIndex   1 >= currentSize ? 0 : currentIndex   1;
        return currentIndex;    
    }

    function doNext() {
        var ctx = panels.find('div.current img');
        ctx.removeClass(currentClass).removeAttr('style');
        ctx.eq(getNext()).fadeIn().addClass(currentClass);  
    }

    $(document).ready(function () {
        pages = $('.panels-nav a');
        panels = $('.panels');  
        arrows = $('.arrows');

        pages.click(showPage);
        panels.bind('mouseenter mouseleave', showArrows);
        arrows.find('.prev').click(doPrev).end().find('.next').click(doNext);

        pages.eq(0).click();
    });
});
</script>
  

Мои вопросы в том, как мне изменить js-файл с поиска img на поиск нескольких разных идентификаторов div, прикрепленных к скользящим панелям?

Спасибо.

Комментарии:

1. У вас есть какой-либо конкретный вопрос?

Ответ №1:

любая ссылка на img должна быть новым селектором. Что-то вроде ‘div.slider’, div с классом slider.

Посмотрите на все находки, там вы увидите селекторы img.