Установка:
Добавим в начало нашей страницы, после тега body скрипты.
HTML-Code
<script type="text/javascript" src="http://ucoz-helper.ucoz.com/js_jquery/amazon_scroller.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#amazon_scroller").amazon_scroller({
scroller_title_show: 'enable',
scroller_time_interval: '3000',
scroller_window_background_color: "none",
scroller_window_padding: '10',
scroller_border_size: '2',
scroller_border_color: '#9C6',
scroller_images_width: '80',
scroller_images_height: '60',
scroller_title_size: '11',
scroller_title_color: 'black',
scroller_show_count: '3',
directory: 'http://ucoz-helper.ucoz.com/js_jquery/'
});
});
</script>
для того чтобы, переключатель изображений, отображался у вас на странице, следует в выше предоставленном скрипте прописать папку, где лежит изображение arrow.gif, в моём случае это directory: 'http://center-dm.ru/data/jQuery/Amazon_ckroller/'
теперь установим наш основной код, где мы будем использовать списки, хочу заметить, что после основных списков с изображениями, мы добавляем ещё одни списки, которые будут отвечать за кнопку переключения изображений.
HTML-Code
<div id="amazon_scroller" class="amazon_scroller">
<div class="amazon_scroller_mask">
<ul>
<li><a href="#"><img src="img/Fade_Out_01.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_02.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_03.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_04.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_01.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_02.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_03.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_04.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_01.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_02.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_03.jpg" alt="title"/></a></li>
</ul>
</div>
<ul class="amazon_scroller_nav">
<li></li>
<li></li>
</ul>
<div style="clear: both"></div>
</div>
CSS-Code
.amazon_scroller{
padding: 0px;
margin: 0px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-khtml-border-radius: 10px;
}
.amazon_scroller .amazon_scroller_nav{
position: absolute;
}
.amazon_scroller .amazon_scroller_nav li{
cursor: pointer;
position: absolute;
}
.amazon_scroller .amazon_scroller_mask{
position: absolute;
margin-left: 30px;
margin-right: 30px;
overflow: hidden;
}
.amazon_scroller ul{
padding: 0px;
margin: 0px;
float: left;
}
.amazon_scroller ul li{
padding: 0px;
margin: 0px;
margin-left: 5px;
margin-right: 5px;
list-style: none;
float: left;
text-align: center;
display:inline;
}
.amazon_scroller ul li a{
text-decoration: none;
}
.amazon_scroller ul li a:hover{
text-decoration: underline;
}
.amazon_scroller ul li a img{
border: none;
}
Всё, теперь наш скроллер изображений на jquery готов.
· 
13:38
