Показать сообщение отдельно
  #3 (permalink)  
Старый 06.10.2011, 14:44
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 79

Полный пример
Вот как в точности:
HTML
Код:
<div class="bottom-scroll-box">
	<a class="prev nav"></a>
	<div class="bottom-scroll" id="bottom-scroll">
		<div class="items">

			<a href="">
				<img src="images/w1.jpg" alt="">
				<span class="disk-name">Kyowa KR210 HPB</span>
				<span class="disk-param">7.0/16/40.0/5x114,3</span>
			</a>
			<a href="">
				<img src="images/w1.jpg" alt="">
				<span class="disk-name">Kyowa KR210 HPB</span>
				<span class="disk-param">7.0/16/40.0/5x114,3</span>
			</a>
			<a href="">
				<img src="images/w1.jpg" alt="">
				<span class="disk-name">Kyowa KR210 HPB</span>
				<span class="disk-param">7.0/16/40.0/5x114,3</span>
			</a>
			<a href="">
				<img src="images/w1.jpg" alt="">
				<span class="disk-name">Kyowa KR210 HPB</span>
				<span class="disk-param">7.0/16/40.0/5x114,3</span>
			</a>
			<a href="">
				<img src="images/w1.jpg" alt="">
				<span class="disk-name">Kyowa KR210 HPB</span>
				<span class="disk-param">7.0/16/40.0/5x114,3</span>
			</a>
			<a href="">
				<img src="images/w1.jpg" alt="">
				<span class="disk-name">Kyowa KR210 HPB</span>
				<span class="disk-param">7.0/16/40.0/5x114,3</span>
			</a>
			<a href="">
				<img src="images/w1.jpg" alt="">
				<span class="disk-name">Kyowa KR210 HPB</span>
				<span class="disk-param">7.0/16/40.0/5x114,3</span>
			</a>
		</div>
	</div>
	<a class="nav next"></a>
</div>
CSS
Код:
.bottom-scroll-box {
	width: 960px;
	height: 155px;
	margin-top: 20px;
}
.bottom-scroll {
	float: left;
	width: 902px;
	height: 155px;
	margin: 0;
	position: relative;
	overflow: hidden;
}
.bottom-scroll .items {
	width:20000em;
	position:absolute;
	clear:both;
}
.items a {
	display: block;
	float:left;
	width:130px;
	margin: 0 10px;
	text-align: center;
	text-decoration: none;
}
.items a img {
	width: 100px;
	margin: 0 auto 15px;
}
.disk-name {
	display: block;
	margin: 0 auto 4px;
	color: #494c4d;
	font-size: 12px;
}
.disk-param {
	display: block;
	margin: 0 auto 4px;
	color: #f24100;
	font-size: 10px;
}

.bottom-scroll-box a.prev, .bottom-scroll-box a.next {
	display: block;
	float: left;
	width: 29px;
	height: 49px;
	margin-top: 30px;
	background-image: url(../img/arrow-scroll.gif);
	background-repeat: no-repeat;
	cursor: pointer;
}
.bottom-scroll-box a.prev:hover, .bottom-scroll-box a.prev:active {
	background-position: -29px 0;
}
.bottom-scroll-box a.next {
	background-position: right 0;
}
.bottom-scroll-box a.next:active, .bottom-scroll-box a.next:hover {
	background-position: -58px 0;
}
Вызов скроллера:
Код:
$(function(){
	$('#bottom-scroll').scrollable({
		circular: true, 
		mousewheel: true
	}).autoscroll({
		interval:3000
	});
});
Ответить с цитированием