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

RetroGT · February 4, 2012

Добрый день. Я столкнулся с вот такой проблемой:

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

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

http://muzikadushi.com/as3.php

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

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

<link rel="stylesheet" href="styler2.css" type="text/css" /> 
	<meta http-equiv="Content-Type" content="text/html;charset=windows-1251"> 
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function(){
    //Get our elements for faster access and set overlay width
    var div = $('div.sc_menu'),
                 ul = $('ul.sc_menu'),
                 // unordered list's left margin
                 ulPadding = 15;

    //Get menu width
    var divWidth = div.width();

    //Remove scrollbars
    div.css({overflow: 'hidden'});

    //Find last image container
    var lastLi = ul.find('li:last-child');

    //When user move mouse over menu
    div.mousemove(function(e){

      //As images are loaded ul width increases,
      //so we recalculate it each time
      var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

      var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
      div.scrollLeft(left);
    });
});</script></head>

и <body></body>:

<body style="background-color: #3a3a3a;">
<div class="sc_menu" id="sc_menu">
  <ul class="sc_menu">
    <li><a href="#">
      <img src="covers/amiramov_front.png" width="180px" alt="Menu"/>
    </a></li>
    <li><a href="#">
      <img src="covers/igra_front.png" width="180px" alt="Navigation"/>
    </a></li>
    <li><a href="#">
      <img src="covers/kucin_front.png" width="180px" alt="Scrolling"/>
    </a></li>
    <li><a href="#">
      <img src="covers/diumin_front.png" width="180px" alt="jQuery"/>
    </a></li>
	<li><a href="#">
      <img src="covers/duety_front.png" width="180px" alt="Megnu"/>
    </a></li>
    <li><a href="#">
      <img src="covers/butyrka_front.png" width="180px" alt="Navihgation"/>
    </a></li>
    <li><a href="#">
      <img src="covers/leti_dusha_front.png" width="180px" alt="Sjcrolling"/>
    </a></li>
    <li><a href="#">
      <img src="covers/vne_zakona_front.png" width="180px" alt="jlQuery"/>
    </a></li>
	<li><a href="#">
      <img src="covers/amiramov_front.png" width="180px" alt="Mennu"/>
    </a></li>
    <li><a href="#">
      <img src="covers/igra_front.png" width="180px" alt="Navigabtion"/>
    </a></li>
    <li><a href="#">
      <img src="covers/kucin_front.png" width="180px" alt="Scrolvling"/>
    </a></li>
    <li><a href="#">
      <img src="covers/diumin_front.png" width="180px" alt="jQucery"/>
    </a></li>
	<li><a href="#">
      <img src="covers/duety_front.png" width="180px" alt="Mevnu"/>
    </a></li>
    <li><a href="#">
      <img src="covers/butyrka_front.png" width="180px" alt="Nadvigation"/>
    </a></li>
    <li><a href="#">
      <img src="covers/leti_dusha_front.png" width="180px" alt="Scrsolling"/>
    </a></li>
    <li><a href="#">
      <img src="covers/vne_zakona_front.png" width="180px" alt="jQueray"/>
    </a></li>
  </ul>
</div>
</body>

styler2.php:

div.sc_menu {
  /* Set it so we could calculate the offsetLeft */
  position: relative;
  height: 200px;
  width:1000px;
  /* Add scroll-bars */
  overflow: auto;
}
ul.sc_menu {
  display: block;
  height: 200px;
  /* Max width here, for users without Javascript */
  width: 1500px;
  padding: 15px 0 0 15px;
  /* Remove default margin */
  margin: 0;
  background: url('navigation.png');
  list-style: none;
}
.sc_menu li {
  display: block;
  float: left;
  padding: 0 4px;
}
.sc_menu a {
  display: block;
  text-decoration: none;
}
.sc_menu span {
  /* We want a caption to display on the next line */
  display: block;
  margin-top: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}

Помогите пожалуйста ...

Great Rash · February 6, 2012

http://forum.htmlbook.ru/index.php?showtopic=23096

Sign In

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

Question

RetroGT

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information