За последние 24 часа нас посетили 17242 программиста и 1688 роботов. Сейчас ищут 1274 программиста ...

Горизонтальный скролл изображений

Тема в разделе "JavaScript и AJAX", создана пользователем retrogt, 4 фев 2012.

  1. retrogt

    retrogt Активный пользователь

    С нами с:
    25 янв 2012
    Сообщения:
    8
    Симпатии:
    0
    Добрый день. Я столкнулся с вот такой проблемой:

    Нужен горизонтальный скролл изображений который при наведении на две изображения по бокам ( стрелки <- и ->) прокручивался в одну или другую сторону. Желательно что-б он тоже как-то сам прокручивался медлено, без нажатия, но это не обезательно.

    Вот пример такого кроллинга, только тут он прокрчивается при простом наведении на все изображения, а мне нужно со стрелками.

    http://muzikadushi.com/as3.php

    В этом скрипте я столкнулся с ещё одной проблемой: в коде у меня гдето 15 изображений, а он прокручивает только 7 :(

    Вот код этого скрипта:

    Код (Text):
    1. <link rel="stylesheet" href="styler2.css" type="text/css" />
    2.     <meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
    3.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    4.     <script type="text/javascript">
    5.     $(function(){
    6.     //Get our elements for faster access and set overlay width
    7.     var div = $('div.sc_menu'),
    8.                  ul = $('ul.sc_menu'),
    9.                  // unordered list's left margin
    10.                  ulPadding = 15;
    11.  
    12.     //Get menu width
    13.     var divWidth = div.width();
    14.  
    15.     //Remove scrollbars
    16.     div.css({overflow: 'hidden'});
    17.  
    18.     //Find last image container
    19.     var lastLi = ul.find('li:last-child');
    20.  
    21.     //When user move mouse over menu
    22.     div.mousemove(function(e){
    23.  
    24.       //As images are loaded ul width increases,
    25.       //so we recalculate it each time
    26.       var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
    27.  
    28.       var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
    29.       div.scrollLeft(left);
    30.     });
    31. });</script></head>
    и <body></body>:
    Код (Text):
    1. <body style="background-color: #3a3a3a;">
    2. <div class="sc_menu" id="sc_menu">
    3.   <ul class="sc_menu">
    4.     <li><a href="#">
    5.       <img src="covers/amiramov_front.png" width="180px" alt="Menu"/>
    6.     </a></li>
    7.     <li><a href="#">
    8.       <img src="covers/igra_front.png" width="180px" alt="Navigation"/>
    9.     </a></li>
    10.     <li><a href="#">
    11.       <img src="covers/kucin_front.png" width="180px" alt="Scrolling"/>
    12.     </a></li>
    13.     <li><a href="#">
    14.       <img src="covers/diumin_front.png" width="180px" alt="jQuery"/>
    15.     </a></li>
    16.     <li><a href="#">
    17.       <img src="covers/duety_front.png" width="180px" alt="Megnu"/>
    18.     </a></li>
    19.     <li><a href="#">
    20.       <img src="covers/butyrka_front.png" width="180px" alt="Navihgation"/>
    21.     </a></li>
    22.     <li><a href="#">
    23.       <img src="covers/leti_dusha_front.png" width="180px" alt="Sjcrolling"/>
    24.     </a></li>
    25.     <li><a href="#">
    26.       <img src="covers/vne_zakona_front.png" width="180px" alt="jlQuery"/>
    27.     </a></li>
    28.     <li><a href="#">
    29.       <img src="covers/amiramov_front.png" width="180px" alt="Mennu"/>
    30.     </a></li>
    31.     <li><a href="#">
    32.       <img src="covers/igra_front.png" width="180px" alt="Navigabtion"/>
    33.     </a></li>
    34.     <li><a href="#">
    35.       <img src="covers/kucin_front.png" width="180px" alt="Scrolvling"/>
    36.     </a></li>
    37.     <li><a href="#">
    38.       <img src="covers/diumin_front.png" width="180px" alt="jQucery"/>
    39.     </a></li>
    40.     <li><a href="#">
    41.       <img src="covers/duety_front.png" width="180px" alt="Mevnu"/>
    42.     </a></li>
    43.     <li><a href="#">
    44.       <img src="covers/butyrka_front.png" width="180px" alt="Nadvigation"/>
    45.     </a></li>
    46.     <li><a href="#">
    47.       <img src="covers/leti_dusha_front.png" width="180px" alt="Scrsolling"/>
    48.     </a></li>
    49.     <li><a href="#">
    50.       <img src="covers/vne_zakona_front.png" width="180px" alt="jQueray"/>
    51.     </a></li>
    52.   </ul>
    53. </div>
    54. </body>
    styler2.php:
    Код (Text):
    1. div.sc_menu {
    2.   /* Set it so we could calculate the offsetLeft */
    3.   position: relative;
    4.   height: 200px;
    5.   width:1000px;
    6.   /* Add scroll-bars */
    7.   overflow: auto;
    8. }
    9. ul.sc_menu {
    10.   display: block;
    11.   height: 200px;
    12.   /* Max width here, for users without Javascript */
    13.   width: 1500px;
    14.   padding: 15px 0 0 15px;
    15.   /* Remove default margin */
    16.   margin: 0;
    17.   background: url('navigation.png');
    18.   list-style: none;
    19. }
    20. .sc_menu li {
    21.   display: block;
    22.   float: left;
    23.   padding: 0 4px;
    24. }
    25. .sc_menu a {
    26.   display: block;
    27.   text-decoration: none;
    28. }
    29. .sc_menu span {
    30.   /* We want a caption to display on the next line */
    31.   display: block;
    32.   margin-top: 3px;
    33.   text-align: center;
    34.   font-size: 12px;
    35.   color: #fff;
    36. }
    Помогите пожалуйста ...
     
    #1 retrogt, 4 фев 2012
  2. grun

    grun Активный пользователь

    С нами с:
    2 фев 2012
    Сообщения:
    1
    Симпатии:
    0
    #2 grun, 4 фев 2012
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)