Добрый день. Я столкнулся с вот такой проблемой: Нужен горизонтальный скролл изображений который при наведении на две изображения по бокам ( стрелки <- и ->) прокручивался в одну или другую сторону. Желательно что-б он тоже как-то сам прокручивался медлено, без нажатия, но это не обезательно. Вот пример такого кроллинга, только тут он прокрчивается при простом наведении на все изображения, а мне нужно со стрелками. 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; } Помогите пожалуйста ...
