Нужен горизонтальный скролл изображений который при наведении на две изображения по бокам ( стрелки <- и ->) прокручивался в одну или другую сторону. Желательно что-б он тоже как-то сам прокручивался медлено, без нажатия, но это не обезательно.
Вот пример такого кроллинга, только тут он прокрчивается при простом наведении на все изображения, а мне нужно со стрелками.
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;
}
Помогите пожалуйста ...
Спустя 1 час, 45 минут, 4 секунды (4.02.2012 - 15:24) Oyeme написал(а):
| Цитата |
| В этом скрипте я столкнулся с ещё одной проблемой: в коде у меня гдето 15 изображений, а он прокручивает только 7 :( |
Вычеслите общие колличество изображений и установите ширину
15 *180=2700
ul.sc_menu {
width: 2700px;
}
Установите для изображений единый класс,а не прописывайте каждый раз ширину.
<img src="covers/butyrka_front.png" width="180px" alt="Nadvigation"/>
Создайте "единую" функцию в которую Вы подаёте расстояния для передвижения,в Вашем случаи это 15,а потому уже подавайте вот сюда
div.scrollLeft(left);
Каждый раз Вы увеличиваете на +15 при передвижения.Соотвестенно если Вы хотите назад то -15.
В инернете полно уроков каруселей.
Форматирование у Вас страдает,ужастный стиль.