VPF::Javascript Карусель - Форум программистов

Atum

Дата 28.4.2012, 10:32 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 265
Регистрация: 3.10.2008

Репутация: нет
Всего: нет

Добрый день ! потребовалось создать горизонтальную карусель для прокрутки городов(в идеале чего угодно - меню кольцевое и т.д.) !

Для java , C , C++ , C# и т.д. - ничего нет проще скажите Вы! - кольцевой двунаправленный список !

а что делать на javascript - первое что приходит в голову - создать аналогичную структуру похожую на LinkedList

но есть решение куда красивее , эффектнее и изящнее !

для этого мы создаем массив - из N городов - если нам надо выводить их по M то просто добавляем в конец массива первые M городов

далее при увеличении ++i или --i мы смотрим индекс если i<0 то i = N если i>N i=0;

Код


<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>JSP Page</title>
  </head>
  <body>
    
    <style>
      .idclass{
        float: left; width: 260px;
        border: 1px solid #000;
        text-align: center;
      }
    </style>
    <div id="prev" style="float: left;" onclick="dec()">&nbsp;<<<<&nbsp; </div>
    <div id="id0" class="idclass" ></div>
    <div id="id1" class="idclass"></div>
    <div id="id2" class="idclass"></div>
    <div id="next" style="float: left;" onclick="inc()">&nbsp;>>>> </div>
    <script>
      
      var arr= ['Абакан','Альметьевск','Анапа',
        'Ангарск','Анжеро-Судженск','Арзамас','Армавир','Архангельск','Асбест',
        'Астрахань ','Ачинск','Балаково '];

// количество видимых элементов в карусели
var citycount = 3;

// добавляем их в конец массива
for(var i = 0 ; i< citycount ; i++){
  arr[arr.length] = arr[i];
}
      var it = 0;
      function print(){
        for(var i =0;i<citycount ;i++){
          document.getElementById("id"+i).innerHTML = arr[it+i] + "&nbsp;&nbsp;";
        }
        
      }
      function dec(){
        it--;
        if(it<0) it = arr.length - citycount;
        print();
      } 
      function inc(){
        it++; 
        if(it>(arr.length - citycount)) it = 0;
        print();
      }
      print();
      
    </script>
  </body>
</html>

Добавлено через 1 минуту и 15 секунд
Но вопрос мой остался Как на javascript создать LinkedList кольцевой двунаправленный список ?

может кто то подсказать такой код ?

Добавлено через 3 минуты и 21 секунду
Модераторы - прошу перенести тему в раздел - Общие вопросы !

хочу получить ответ на свой вопрос по поводу LinkedList

ksnk

Дата 28.4.2012, 15:18 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(Atum @ 28.4.2012, 10:32

)

Как на javascript создать LinkedList кольцевой двунаправленный список ?

Так-же как и на любом другом языке. smile

Только в других языках это будут структуры или классы, а в js - объекты.

Код


<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>JSP Page</title>
  </head>
  <body>
    
    <style>
      .idclass{
        float: left; width: 260px;
        border: 1px solid #000;
        text-align: center;
      }
    </style>
    <div id="prev" style="float: left;" onclick="dec()">&nbsp;<<<<&nbsp; </div>
    <div id="id0" class="idclass" ></div>
    <div id="id1" class="idclass"></div>
    <div id="id2" class="idclass"></div>
    <div id="next" style="float: left;" onclick="inc()">&nbsp;>>>> </div>
    <script>
      
      var arr= ['Абакан','Альметьевск','Анапа',
        'Ангарск','Анжеро-Судженск','Арзамас','Армавир','Архангельск','Асбест',
        'Астрахань ','Ачинск','Балаково '], 
        circularList={name:arr[0]};

        circularList.next=circularList;
        circularList.prev=circularList;
        
      for(var i=1;i<arr.length;i++){
        circularList ={name:arr[i],prev:circularList,next:circularList.next};
        circularList.next.prev=circularList ;
        circularList.prev.next=circularList ;
      }

// количество видимых элементов в карусели
var citycount = 3;

     var it = 0;
      function print(){
        var point=circularList;
        for(var i =0;i<citycount ;i++){
            document.getElementById("id"+i).innerHTML = point.name + "&nbsp;&nbsp;";
            point=point.next;
        }
      }
      function dec(){
        circularList=circularList.prev;
        print();
      } 
      function inc(){
        circularList=circularList.next;
        print();
      }
      print();
      
    </script>
  </body>
</html>

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Atum

Дата 2.5.2012, 13:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 265
Регистрация: 3.10.2008

Репутация: нет
Всего: нет

Нечто похожее нашел по ссылки

http://blog.jcoglan.com/2007/07/23/writing...-in-javascript/

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »