Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Javascript Карусель


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

Для 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
Цитата(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>

Автор: Atum 2.5.2012, 13:55
Нечто похожее нашел по ссылки 

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)